【问题标题】:CSS underline and letter-spacingCSS下划线和字母间距
【发布时间】:2014-01-01 14:53:33
【问题描述】:

在网站菜单中,我实现了客户关于 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;
}

结果如下:

问题是字母间距会弄乱下划线。我已经画了一些 vote magnets 手绘圆圈来指示问题。该行从左侧很好地开始,但随着letter-spacing 的值向右延伸。

屏幕截图来自 Firefox 25。Jsfiddle to see for yourself

我可以使用边框和边距而不是行高来解决这个问题,但这是否可以解决?

【问题讨论】:

  • @isherwood,哎呀没看到。
  • 如果您想对您的设计进行评论。不要做下划线,它看起来很可怕,做一个背景变化的悬停。见例子。 jsfiddle.net/JWcGh/3
  • @Cam 下划线将显示访问者当前所在的页面,我不介意它是否用于此。我只是在做客户想要的:) 如果最终结果完成,我最终会给她建议。

标签: css typography underline letter-spacing


【解决方案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;
}

【讨论】:

  • 这很有创意 :) 还需要注意,如果它用在斜体上你需要调整margin-left 或者它会截掉最后一个字母的一部分。
猜你喜欢
  • 2011-04-30
  • 1970-01-01
  • 2013-12-19
  • 1970-01-01
  • 2013-12-01
  • 1970-01-01
  • 2010-12-16
  • 1970-01-01
相关资源
最近更新 更多