html - 实现动画边框底部的正确方法是什么？

Question

它应该是一个单独的div吗？我不知道如何将其应用于已经有一些内容的 div。

.dashed-line {
  height: 3px;
  width: 700px;
  background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(90deg, red 50%, transparent 50%);
  background-size: 0px 0px, 15px 4px, 4px 0px, 4px 0px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  margin-left: 15px;
  animation: border-dance 7s infinite linear;

}
@keyframes border-dance {
  0% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
  100% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
}

<div class="dashed-line"></div>

Answer 1

pseudo-elements就是这种情况::before 和 ::after 特别适合。

基本上，它们允许您向页面添加非实际“内容”的元素。它可以是通过 content css 属性进行的一些文本装饰。或者您可以将该属性保留为空字符串 '' 并利用您已将“pseudo-div”添加到节点的事实。

span {
  position: relative;
}
span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(90deg, red 50%, transparent 50%);
  background-size: 0px 0px, 15px 4px, 4px 0px, 4px 0px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  animation: border-dance 7s infinite linear;

}
@keyframes border-dance {
  0% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
  100% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
}

<span> hello i have some content </span>