В этой статье создадим красивое подчеркивание, которое по дизайну идет виде точек, в светло желтом оформление, что появятся при наведении. Сами знаки идут в светлой гамме, это может быть и аналогичным оттенком. Здесь нужно подчекнуть, что для веб мастера, который имеет темный дизайн сайта.
Так как на светлом фоне подчеркивание уже создано, где немного по другому все смотрится. Мы видели несколько интересных эффектов для ссылок, которые с помощью этого фрагмента идет стильное оформление. Аналогично все примеры подчеркивание отображается только при наведении мыши на ссылку.
HTML
Код
<a class="kagedup-evgunlopas" href="#">ZorNet.Ru - портал</a>
CSS
Код
.kagedup-evgunlopas {
position: relative;
display: inline-block;
padding: 4px 0;
text-decoration: none;
color: #ece8e8;
}
.kagedup-evgunlopas:after {
content: '';
height: 1px;
display: block;
border-bottom: 1px dotted #e0d16c;
width: 0;
-webkit-transition: width 0.3s;
transition: width 0.3s;
}
.kagedup-evgunlopas:hover {
text-decoration: none;
}
.kagedup-evgunlopas:hover:after {
width: 100%;
}
Когда вы устанавливаете это свойство с помощью псевдоклассов для элемента, подчеркивание ссылки может отображаться в соответствии с состоянием ссылки.
Демонстрация
