• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать красивый способ подчеркивания в CSS (Стилизация подчеркиваний ссылок при помощи CSS3)
Создать красивый способ подчеркивания в CSS
Kosten
Четверг, 06 Декабря 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Этот способ подчеркивание ключевых слов, которые установлены под ссылками на переход. Безусловно он выглядит не стандартно, если появление у него происходит с центра по обои стороны.

Также вы самостоятельно можете выставить как ширину, так оттенок цвета к нему. Само использование свойство 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%;
}


Демонстрация
Прикрепления: 9781294.jpg (9.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать красивый способ подчеркивания в CSS (Стилизация подчеркиваний ссылок при помощи CSS3)
  • Страница 1 из 1
  • 1
Поиск: