Увеличение отступа от линии подчеркивания в css

#css

    TEXT


span a  {
    text-decoration: underline;
}

Как можно увеличить отступ от линии подчеркивания в css?    

Ответы

Ответ 1

С text-decoration: underline; такого не получится сделать.
Нужно поставить text-decoration: none; и border-bottom: 1px #цвет_ссылки solid;. 
Вот хороший совет по теме.


Ответ 2

В начале подумал что не походит выриант с бордером, так как заголовок может принимать
ширину 100%, и тогда бордер ничем не отличается от hr.

прочитав следующий коммент про display:inline-block; помог сделать ширину заголовка,
как бы по содержимому, остается только отцентрировать.

Дальше поигравшись и inline-block отставил в сторону, и применил table. Вот что получилось.

display: table;//ширина по тексту в заголовке
border-bottom: 1px solid #8edfce;//само подчеркивание
line-height: 36px;//высота строки, ну и соответственно отступ от подчеркивания


Ответ 3

На мой взгляд лучше использовать display:inline-block