Иногда на сайте нужно создать оригинальное подчеркивание ссылки или ключевого слова, что будет находится для перехода. Давайте рассмотрит один вариант, который изначально по стилистике выстроен в горизонтальное меню. Но веб разработчик может сделать на любое слово, которое находится под ссылкой на переход.
Сам эффект заключается в том, что при наведение идет верхнее и нижнее подчеркивание, но если по вверх идет с одной стороны, то снизу с противоположной, что визуально смотрится красиво.
HTML
Код
<nav>
<ul>
<li>ZORNET.RU</li>
<li>СКРИПТЫ</li>
<li>ШАБЛОНЫ</li>
<li>СТИЛИСТИКА</li>
</ul>
</nav>
CSS
Код
ul {
display: flex;
list-style: none;
}
li {
padding: 10px 15px;
cursor: pointer;
position: relative;
}
li::before,
li::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 1px;
background-color: #00BEE0;
transition: all 0.3s;
}
li::before {
top: 0;
left: 0;
}
li::after {
right: 0;
bottom: 0;
}
li:hover::before,
li:hover::after {
width: 100%;
}
Демонстрация
