在网站菜单中,我已经实现了客户关于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。
我可以使用边框并使用边距而不是行高来解决这个问题,但这是否可以修复?
答案 0 :(得分:3)
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;
}