• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Эффект подчёркивания слева направо в CSS (Добавляет оформление текста в виде его подчеркивания)
Эффект подчёркивания слева направо в CSS
Kosten
Дата: Понедельник, 2019-05-06, 03:07 | Сообщение 1
Администраторы
Сообщений:23411
Награды: 56


В этой статье создадим красивое подчеркивание, которое по дизайну идет виде точек, в светло желтом оформление, что появятся при наведении. Сами знаки идут в светлой гамме, это может быть и аналогичным оттенком. Здесь нужно подчекнуть, что для веб мастера, который имеет темный дизайн сайта.

Так как на светлом фоне подчеркивание уже создано, где немного по другому все смотрится. Мы видели несколько интересных эффектов для ссылок, которые с помощью этого фрагмента идет стильное оформление. Аналогично все примеры подчеркивание отображается только при наведении мыши на ссылку.



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%;
}

Когда вы устанавливаете это свойство с помощью псевдоклассов для элемента, подчеркивание ссылки может отображаться в соответствии с состоянием ссылки.

Демонстрация
Прикрепления: 8063091.png(18.6 Kb) · vtidsan.zip(1.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Эффект подчёркивания слева направо в CSS (Добавляет оформление текста в виде его подчеркивания)
  • Страница 1 из 1
  • 1
Поиск: