Анимирование подчеркивание заголовков

Published 4 года ago // 1 Comment

Как правило стиль выделения заголовков на сайтах при наведение особо не отличается друг от друга, однако встречаются и исключения. О красивой реализации одного из них хотел бы рассказать в данной статье.

Используемый эффект не требует дополнительного подключения каких-либо библиотек и выполнен на чистом CSS. Для его работы требуется поддержка CSS анимации, а она включена во все современные браузеры.

Первое, что требуется сделать, это убрать подчеркивание ссылки, установить параметр position: relative, а также убедиться в том, что при наведение ссылка не изменяет свой цвет, установив для hover состояния цвет аналогичный обычному состоянию ссылки.

Теперь можно приступить непосредственно к эффекту подчеркивания нашей ссылки. Для этого будем использовать псевдокласс :before. Существует два состояния: не наведенное, когда параметр scaleX равен 0, а visibility присвоен hidden (Данный параметр вставляется для браузеров, которые не поддерживают CSS анимацию) и наведенное, подробнее о параметрах которого речь пойдет чуть позже.

При наведение параметр scaleX равен единице — это означает полное подчеркивание ссылки. В разрабатываемом примере ссылка подчеркивается за 0.35 секунды за счет анимации включенной в псевдокласс :before. Помимо этого параметр visiblity должен быть visible.

Подчеркивание данной техникой достаточно несложное в технической реализации и отлично впишется на сайте. А на тот случай, если читателю Хевикса захочется изменения цвета ссылки при наведение, то сделать это достаточно несложно, требуется лишь добавить следующие строки.