Pseudo Element Across Multiple Lines to Create a Continuous Underline Animation

pseudo element across multiple lines to create a continuous underline animation

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>

Transitioning underlines for multiple lines of Text

#borderText { border-bottom: 1px solid white;  transition: .5s; display: inline;cursor: pointer;}
#borderText:hover {  border-bottom: 1px solid black;}
#textDecor {  text-decoration: none;  transition: .5s;  }
#textDecor:hover {  text-decoration: underline;  }

<p id="borderText">  Lorem Ipsum Sit Amet<br />  Some other Text<br />  Some Other Text<br /></p>
<p id="textDecor">  Here is some text<br />  with text-decoration and<br />  as you should see, the text<br />  is underlined but cannot be transitioned<br /></p>

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

An idea is to consider gradient coloration with background-clip: text applied to an inline element.

body {
  background: #3498db;
  font-family: sans-serif;
}

h1 {
  font-size: 5em;
}

h1 span {
  background:
    linear-gradient(#fff,#fff) left no-repeat
    rgba(0, 0, 0, .3);
  background-size:0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:loading 5s forwards linear;
}

@keyframes loading {
  to {
    background-size:100% 100%;
  }
}

<h1><span>Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</span></h1>

How to animate underline from left to right?

You can use gradient and adjust background-position with a delay to obtain such effect:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

<span class="un">Underlined Text</span>

How to draw a line using pseudo element right below text and ignore the padding?

You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.

a {  position: absolute;  padding: 20px 0;  top: 50%;  left: 50%;  margin-top: -30px;  margin-left: -30px;  line-height: 20px;  border: 1px solid aqua;}
a:after {  content: "";  display: block;  border-top: 1px solid #333;  width: 0;  transition: width .3s;}
a:hover:after {  width: 100%;}

<a>Link Text</a>

Animated underline hover effect for text-wrapped elements

The comments are correct - that website isn't handling the case when links were being underlined.

However - I have found an alternative solution that DOES handle the multiline underline animation. They're setting a background image to the element and applying the same principles

https://codepen.io/christiancroser/pen/xqrLBm

$color-on-light: black;
$underline-width: 2px;

color: $color-on-light;
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: bottom right;
transition: background-size 0.15s;
padding-bottom: $underline-width;
background-image: linear-gradient(
    transparent calc(100% - #{$underline-width}),
    $color-on-light $underline-width
);

&.on-dark {
    $color-on-dark: white;

    color: $color-on-dark;
    background-image: linear-gradient(
        transparent calc(100% - #{$underline-width}),
        $color-on-dark $underline-width
    );
}

&:hover {
    background-size: 100% 100%;
    background-position: bottom left;
}

Text underline with a short slant line at the end using CSS

You can use an absolutely positioned pseudo element using transform: rotate()

a {  text-decoration: none;  border-bottom: 1px solid black;  position: relative;  display: inline-block;}a:after {  content: '';  position: absolute;  right: 0; bottom: -1px;  border-bottom: 1px solid black;  width: 25%;  transform: translateX(100%) rotate(45deg);  transform-origin: 0 50%;}

<a href="#">Home</a>

How to achieve this underline effect on hover, ran out of options

I was able to achieve this with a box-shadow on an inline element.

.underline {
  box-shadow: inset 0 -0.35em transparent;
  display: inline;
}

.underline:hover {
  box-shadow: inset 0 -0.35em #e2766c;
}

<h1 class="underline">Donec ut ultricies leo. Ut<br>venenatis, libero id males.</h1>

---

Related Topics