Отправить заявку

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>

Демо:

Другие публикации