Jak zmodyfikować efekt podkreślenia hover? /CSS

pytanie zadane 4 czerwca 2018 w HTML i CSS przez rikoooo1234 Nowicjusz (120 p.)

Witam. Mam mały problem. Otóż ogarnąłem sobie, jak po najechaniu myszką zrobić efekt ładnego podkreślenia od lewej strony. Natomiast nie potrafię go tak zmodyfikować, aby linia, która podkreśla tekst była trochę niżej. Próbowałem na wiele sposobów, ale nadal nie znalazłem rozwiązania. Proszę o pomoc, to bardzo ważne. Oto mój kod css:

a{
    text-decoration: none;
    color: white;
    transition: 0.6s background-size;
    background: linear-gradient(#025f7a, #025f7a) left bottom / 0 .2em no-repeat;
}
a:hover {
    background-size: 100% .2em;
}

6	komentarz 4 czerwca 2018 przez Shaoi Mądrala (7,020 p.) A nie lepiej skorzystać z pseudo elementu ::after?

1 odpowiedź

odpowiedź 5 czerwca 2018 przez Radosław Olejniczak Początkujący (270 p.)
edycja 5 czerwca 2018 przez Radosław Olejniczak

Tego nie ogarniesz za pomocą text decoration, ale na szczęście jest multum innych sposobów:

Najprościej będzie to zrobić za pomocą border-bottom - możesz dowolnie ustalić wówczas szerokość, czy kolor lini.

a
{
display: inline-block;
padding: 2px 10px;
border-bottom: 2px solid transparent;
}

a:hover
{ 
border-color: #ccc;
}

Możesz też, tak jak wspomniał @Shaoi wykorzystać do tego pseudoklasę :after

a
{
display: inline-block;
position: relative;
}

a:after
{
content: " ";
display: block;
width: 100%;
height: 3px;
background: transparent;
position: absolute;
bottom: -2px;
left: 0;
}

a:hover:after
{
background: #ccc;
}