Как увеличить растояние подчеркивания у ссылок, которые состоят из нескольких строк?

Question

[Сергей Сунцев]

Суть придельно ясна, дизайнер требует увеличить интеравл у подчеркивания ссылки, которое появляется при наведении. Если кто подскажет, то буду рад, или объяснит, почему так сделать нельзя.

К примеру
<a href="" > li<br>nk</a>

Comments

[Sergey Semenov]

Если вы делаете так как в примере выше тогда логично, подчеркиватся будет только нижние буквы. Если вы хотите получить подчеркивание в каждой строчке, нужно разделить как в моем примере ниже. Если я все правильно понял. Да упустил еще один момент, есть тег можно сделать и на нем li
nk

[Sergey Semenov]

Не назвал тег в коменте, . К нему можно и нужно применять стили. Соответственно отступ задаете padding-top: 5px;

Answer 1

[trushka]

можно с помощью linear-gradient. Только в ссылку span вложить пийдётся, чтоб растянуть по высоте строку, не увеличивая шрифт. Line-height только расстояние между строками увеличивает..
https://jsfiddle.net/thu0wxba/

Comments

[Сергей Сунцев]

Спасибо, самое приемлимое решение.

Answer 2

[Олег Эфимчук]

Не подходит ?
1)text-decoration: none; /* Убираем подчеркивание у ссылок */
2)border-bottom ? /* Создаем подчеркивание у ссылок но теперь можно регулировать растяние с помощью высоты блока*/ если указан псевдоклас (hover: )конечно.

Comments

[Сергей Сунцев]

Пробовал делать на двух-строчных ссылках? Подчеркивание в таком случае появляется только под нижней строчкой.

[Олег Эфимчук]

Кроме то чтобы создать два блока я не вижу .

Answer 3

[Sergey Semenov]

html
<a href="#">li<hr></a><br>
<a href="#">nk<hr></a>
css
a{
text-decoration:none;
}
.hr{
padding-top:5px;
}

Comments

[Сергей Сунцев]

a href="#">li br> nk1/a>
a href="#">li br> nk2/a>
Ссылки с переносами строки.

[Олег Эфимчук]

каждую ссылку нужно поместить в див div

[Олег Эфимчук]

seodon.ru/primery/html-css/navigation/links-css.php