What's the correct way of implementing animated border bottom?

user_1231365 0
Viewed 55

Should it be a separate div? I can't figure out how to apply this to a div that already has some content.

.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>

linear-gradients css-animations css html
2 Answers

This is the kind of situation the pseudo-elements ::before and ::after are particularly suited for.

Basically, they allow you to add elements to your page that aren't actual "content". It can either be some textual decoration through the content css property. Or you can leave that property as an empty string '' and just take advantage of the fact that you have a "pseudo-div" added to your node.

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>

user_23064810

You can do this with an easier syntax:

.box {
  --p:10px; /* width of the pattern */
  --w:4px;  /* width of the gap inside the pattern */
  --h:3px;  /* height of line */

  padding: 8px;
  font-size:20px;
  display: inline-block;
  background: 
    linear-gradient(90deg, red calc(100% - var(--w)), transparent 0)
    0 100% / var(--p) var(--h) repeat-x;
  animation: move 0.3s linear infinite;
}

@keyframes move {
  to {
    background-position: var(--p) 100%;
  }
}
<div class="box">
  some text
</div>

user_86203330
Related