Подчеркивание CSS и расстояние между буквами

Question

В меню веб-сайта я выполнил некоторые пожелания моего клиента относительно типографики в CSS. Ей нужно другое отслеживание шрифта, без проблем. Но она хочет, чтобы активная ссылка была подчеркнута. Поскольку я не реализовал код для целевой активной ссылки, я просто подчеркнул их всех, чтобы посмотреть, как это будет выглядеть. CSS выглядит следующим образом:

.main-navigation a { 
    display: block; 
    color: black; 
    font-weight: bold; 
    letter-spacing: 0.45em; 
    line-height: 4.5em; 
    text-decoration: underline; 
    text-transform: uppercase; 
} 

И это результат:

Проблема заключается в том, что письмо интервал вид портит подчеркиванием. Я нарисовал несколько голосов магнитов , чтобы указать проблему. Линия начинается красиво с левой стороны, но расширяется со значением letter-spacing справа.

Снимок экрана из Firefox 25. Jsfiddle to see for yourself.

Я мог бы решить это, используя границы и используя поля вместо высоты строки, но это исправление в противном случае?

Answer 1

CSS Text underlining too long when letter-spacing is applied?

http://jsfiddle.net/isherwood/JWcGh/2

.main-navigation a:after { 
    /* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */ 
    position: absolute; 
    /* the same width as our letter-spacing property on the h1 element */ 
    width: 0.45em; 
    /* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */ 
    height: 200%; 
    /* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */ 
    background-color: #fff; 
    /* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */ 
    content: "."; 
    /* hide the dynamic text you've just added off the screen somewhere */ 
    text-indent: -9999em; 
    /* this is the magic part - pull the mask off the left and hide the underline beneath */ 
    margin-left: -.40em; 
}