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