Эффект разноцветного подчеркивания ссылок

22.02.2022

Довольно красивый эффект - ссылка, при наведении, подчеркивается разноцветной линией.

Естественно так можно подчеркнуть любой блок или элемент.

В очередной раз проще показать на примере:

Какой-то текст анкор ссылки (пусть ссылка будет подлиннее) и продолжение текста.

В целом все довольно просто, используем background с linear-gradient для заливки. Первый слой, для постоянной и второй показываем при наведении. Также применяем background-size для смещения заливки так, что бы фон был не на всем элементе, а только на нужной его части.

 
.demo a {
   color: #EE6E39;
    font-size: 20px;
    text-decoration: none;

    background:
            linear-gradient(
                    to right,
                    rgba(100, 200, 200, 1),
                    rgba(255, 200, 200, 1)
            ),
            linear-gradient(
                    to right,
                    rgba(255, 0, 0, 1),
                    rgba(255, 0, 180, 1),
                    rgba(0, 100, 200, 1)
            );
    background-size: 100% 3px, 0 3px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}


.demo a:hover {
    background-size: 0 3px, 100% 3px;
}

Категории: CSS
Яндекс.Метрика