Что такое идеальный вариант подчеркивания ссылок? Это когда есть возможность регулировать толщину и расположение линии. Предлагаем идеальный вариант.
Нам необходимо сделать так, что бы линия подчеркивания отходила недалеко от текста но при этом сам текст ее перекрывал.
Для этого воспользуемся следующим кодом 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>Демо:
