Как уменьшить расстояние между нижней границей и частями текста?

Question

Я в настоящее время строю свой сайт, и у меня возникла проблема. Here is the webpage.

Я хочу добавить 3px подчеркивает только ссылки, как это:

Высота линии текста 56pt, поэтому граница дна слишком далеко от ссылок , text-decoration: underline слишком тонкий, и слишком близко.

Они должны быть примерно на половину этого расстояния. Поскольку отрицательной прокладки не существует, как мне ее исправить?

Answer 1

Теперь используется для этого кода (Это демо)

Css

.HomeText p a { 
color: red; 
text-decoration: none; 
position: relative; 
display: inline-block; 
vertical-align: top; 
} 
.HomeText p a:hover:after{ 
    content:''; 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:-3px; 
    border-bottom:solid 1px red; 

} 

Demo LInk

Answer 2

пытались ли вы это?

a { 
    border bottom: 3px red; 
    } 

Answer 3

Ответ 1: Признайте, что CSS имеет ограничения и работать вокруг них.

Ответ 2: Единственный способ, которым я могу, что делать это является использованием пролетом, отображающее это блок и добавление границы и отступы в нижней части - этот процесс будет открыт целый другой может червей, хотя поплавки встроенных блоков текста и т.д. Так что я хотел бы вернуться, чтобы ответить 1.

Answer 4

Попробуйте добавить следующее:

display: inline-block; 
height: 1.2em; 

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