Как поднять бордер подчеркивающий ссылку?

Question

[Сергей]

Как можно поднять бордер не меняя межстрочный интервал?
codepen.io/serzhei/pen/QwKpJm
Нужно чтобы у первой ссылки (в несколько строк) расстояние между подчеркиванием и текстом было как во второй ссылке (в одну строку)

Answer 1

[Philipp]

Вместо использования бордюра нужно менять цвет подчеркивания. На мой взгляд толстое подчеркивание выглядит в какой-то степени неприятно.

a	{color: #555;
-moz-text-decoration-color: rgba(85,85,85, 0.3);
text-decoration-color: rgba(85,85,85, 0.1);
}

Comments

[Сергей]

text-decoration высоко находится, а опустить пикселя на 2 вниз нельзя(

[Сергей]

по макету вот такое было подчеркивание i.imgur.com/v5WzgWV.jpg

[Юрий Кравчук]

Это хорошо, что появилось свойство меняющие цвет подчёркивания, но ещё не хватает анимации

Answer 2

[keslo]

Можно сделать подчеркивание при наведении на элемент на любом уровне при использовании данного костыля:

<div class="test">
    Текст для подчеркивания
</div>

Стили:

.test{
    box-shadow: none;
}
.test:hover {
    display: inline;
    box-shadow: 0px 7px 0px #fff, 0px 8px 0px #333; // регулируем подчеркивание смещением двух теней
}

Comments

[Сергей]

тоже как вариант, мой пример конечно немного отличается от реального, на макете еще находится фоновая картинка i.imgur.com/v5WzgWV.jpg )) и еще меня смущает css3

[Сергей]

можно конечно на всякий случай модернайзером перестраховаться)

Answer 3

[Satir01]

Еще можно поиграть с изменением line-height у ссылки

Comments

[Сергей]

line-height не регулирует расстояние от линии до текста, а бордер регулируется только при display block