067 607 57 84
МЕНЮ

CSS: найправильніше підкреслення посилань

Створення сайтів Львів

Що таке ідеальний варіант підкреслення посилань? Це коли є можливість регулювати товщину і розташування лінії. Пропонуємо ідеальний варіант.

Нам необхідно зробити так, що б лінія підкреслення відходила недалеко від тексту але при цьому сам текст її перекривав.

Для цього скористаємося наступним кодом CSS:

body {
  height: 100%;
  width: 100%;
  padding: 100px 0;
  margin: 0;
  display: flex;
  justify-content: center;
  font-weight: 100;
}
 
span {
  font-size: 50px;
  color: #333;
  color: transparent;
  text-shadow: 0 0 #333, .08em 0 0 #fff, 0 0, -.08em 0 0 #fff;
  background: -webkit-linear-gradient(#999, #999) center 1.09em no-repeat;
  background: linear-gradient(#999, #999) center 1.09em no-repeat;
  background-size: 85% 1px;
 -webkit-transition: .2s ease;
  transition: .2s ease;
}
 
span:hover {
   background-size: 100% 1px;
}
                    

І розмістимо HTML:

<span>Підкреслення посилань</span>