Underline text

PHOTO EMBED

Thu Mar 10 2022 12:52:35 GMT+0000 (Coordinated Universal Time)

Saved by @jimmy.samaan #undefined

body {

  background-color: #2b0;

  font-size: 3rem;
4
}

div {

  width: 0px;

}

​

a {

  color: #dfe5f3;

  text-decoration: none;

  background-image: linear-gradient(#222b40, #222b40),

    linear-gradient(rgb(6, 251, 8), rgb(176, 251, 188)),

    linear-gradient(#feb2b2, #feb2b2);

  background-size: 20px 2px, 100% 2px, 0 2px;

  background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
17
  background-repeat: no-repeat;
18
  transition: background-size 2s linear, background-position 2s linear;

}
20
​

a:hover {
22
  background-size: 20px 2px, 0 2px, 100% 2px;


// VISCOR


.hover-underline-animation span {
    text-decoration: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        linear-gradient(rgba(176, 251, 188, 0), rgba(51, 30, 167, 0)),
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
    background-size: 20px 2px, 100% 2px, 0 2px;
    background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 1s linear, background-position 1s linear;
}

.hover-underline-animation span:hover {
    background-size: 20px 2px, 0 2px, 100% 2px;
    background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}
content_copyCOPY

https://codepen.io/NMeuleman/pen/JjGeGar