Этот способ подчеркивание ключевых слов, которые установлены под ссылками на переход. Безусловно он выглядит не стандартно, если появление у него происходит с центра по обои стороны.
Также вы самостоятельно можете выставить как ширину, так оттенок цвета к нему. Само использование свойство text-decoration при помощи CSS, можно выставлять эффекты для текста.
Приступаем к установке:
HTML
Код
<span>ZorNet - портал для вебмастера</span>
CSS
Код
span {
display: inline-block;
position: relative;
padding: 3px;
color: #6ebbff;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
span::before,
span::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
height: 2px;
width: 0;
background: #6ebbff;
transition: all 0.3s;
}
span::before {
transform: rotateZ(180deg);
transform-origin: 0% 50%;
}
span:hover::before,
span:hover::after {
width: 50%;
}
Демонстрация
Второй вариант:
Приступаем к установке:
HTML
Код
<a href="#">Второй вариант</a>
CSS
Код
a{
display: inline-block;
position: relative;
text-decoration: none;
}
a::before {
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background-color: #5f627d;
transition: width .5s ease-in-out, left .5s ease-in-out;
left: 50%;
bottom: 0;
}
a::after{
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background-color: #5f627d;
transition: width .5s ease-in-out;
left: 50%;
bottom: 0;
}
a:hover::before{
width: 50%;
left: 0;
}
a:hover::after{
width: 50%;
}
Демонстрация
