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; 
}