Szybki CSS – animacja podkreślenia na hover

Tworzymy animację płynnego podkreślenia podczas hoveru myszki. Pracujemy na kodzie z poprzedniego przykładu, gdzie omawialiśmy sobie właściwość text-shadow. Do dzieła!

Nasz kod:

<style>
        h1 {
            transition: all .5s;
            color: #1e293b;
            text-shadow: 1px 1px 1px rgba(30,41,59, 0.2);
            font-family: Tahoma, sans-serif;
        }
       
        h1:hover {
            color:#ef4444;
            text-shadow: 2px 2px 2px rgba(239,68,68, 0.3);
        }
</style>
(...)
<h1>MY HEADING</h1>

Zamieniamy treść headingu na element a:

<h1><a href="#">MY HEADING</a></h1>

Nasz link musi mieć position relative oraz overflow hidden – a także reset stylów linkowych:

 h1 a {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

Teraz za pomocą pseudoelementu before tworzymy linię pod tekstem:

h1 a::before {
content: '';
display: inline-block;
position: absolute;
width: 100%;
height: 2px;
left: 0;
bottom: 0;
background-color: rgba(14, 116, 144, 0.65);
box-shadow: 0 6px 12px 0px rgba(14,116,144, 0.3);
transition: all .5s;
  }

Przesuwamy linię w lewo (overflow mamy hidden, więc to nie problem):

h1 a::before {
(...)
transform: translateX(-100%);
}

Dla pewności h1 też nadajemy overflow na hidden. Następnie wysuwamy naszą linię na hoverze:

h1:hover a::before {
transform: translateX(0);
}

Już. Działa.