12. Juni 2024

CSS hover underline animation

Mit folgendem Code kannst du Links animiert unterstreichen – auch Links, die sich über mehrere Zeilen erstrecken.

a.underline {
    text-decoration: none;
    background-image: linear-gradient(#c0392b, #c0392b);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .2s;
}

a.underline:hover, a.underline:focus {
    background-size: 100% 2px;
}
Code-Sprache: CSS (css)