pseudo element across multiple lines to create a continuous underline animation

Question

I have an animated line under links. It works fine for single line links but I have some links that are separated with line breaks <br> Is there a way to have the animated underline come out along all the lines of the link? Thanks

body {
  padding: 20px;
  font-family: Helvetica;
}

a {
  font-weight: bold;
  color: black;
  position: relative;
  text-decoration: none;
}

a::before {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 0;
  background-color: #000;
  transition: all 0.2s;
}

a:hover::before {
  width: 100%;
}

<a href="">my link</a>
<br><br>
<a href="">this is<br>a much<br>longer link</a>

score 8 · Accepted Answer · answered May 26 '20 at 10:22

8

Use gradient like below:

body {
  padding: 20px;
  font-family: Helvetica;
}

a {
  font-weight: bold;
  color: black;
  position: relative;
  text-decoration: none;
  background:linear-gradient(#000,#000) left bottom no-repeat;
  background-size:0% 2px;
  transition: all 0.5s;
}

a:hover {
  background-size:100% 2px;
}
/* this will give another kind of animation (all lines will animate at the same time)*/
.alt {
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

<a href="">my link</a>
<br><br>
<a href="">this is<br>a much<br>longer link</a>
<br><br>
<a class="alt" href="">this is<br>a much<br>longer link</a>

How can I achieve a CSS text loading animation over multiple lines?

answered May 26 '20 at 10:22

Temani Afif

245,468
26
309
415

That's brilliant. The second version, using the clone option is exactly what I'm after. Thanks a lot. – Lawmate May 26 '20 at 10:40
If I have an `` within the ``, how can I get just the background line under the text, not the image as well? https://jsfiddle.net/n5yqfute/ – Lawmate May 26 '20 at 12:08
1

@Lawmate add a negative margin to the image to hide the background – Temani Afif May 26 '20 at 12:11
Is it also possible to use it for like a h3. When I change the tag to h3, it stopped working for me. @TemaniAfif – Caspert Mar 12 '23 at 19:14
1

@Caspert add display: inline to h3 or wrap the text inside a span inside the h3 – Temani Afif Mar 12 '23 at 19:20

pseudo element across multiple lines to create a continuous underline animation

1 Answers1