Question

在一个页面上（我为自己维护，因此可以限制浏览器支持FF 3.5+）我想在每个链接到StackOverflow.com后添加“SO”。首先，我这样做了......

a[href^='https://stackoverflow.com/']:after {
  content: "SO";
  font-size: x-small;
  color: #333333;
  padding-left: 1px;
  position: relative;
  bottom: 3px;
}

...但Firefox强调“SO”就像链接本身一样。读完问题后

......我得到了以下解决方案：

a[href^='https://stackoverflow.com/']:after {
  content: "SO";
  font-size: x-small;
  color: #333333;
  padding-left: 1px;
  position: relative;
  bottom: 3px;
  /* clear the underline */
  padding-bottom: 5px;
  background-color: white;
}

也许它是hack'ish，但它相当直观（下划线被它上面的背景隐藏）并且它工作得很好（我不记得我在FF 3.5和FF 7以外的浏览器中检查过它，但仍然是FF是我真正想要支持的唯一浏览器）。问题是FF 8中的代码中断了：上面的下划线清除代码不起作用。所以我正在寻找解决方案。

实际上，我已经找到了一个：添加“display：inline-block”，但是：

它可以导致“SO”被包裹到一个新行
它不能与旧的下划线清除代码一起使用，因为padding-bottom已添加到链接本身

http://cssdesk.com/5TqEN

最后说明：我希望它至少在FF 3.5和FF 8中工作，只使用CSS，而不使“SO”文本成为图像，优于inline-block解决方案

Answer 1

我提到了这个http://jsfiddle.net/wGb68/4/

a[href^='http://stackoverflow.com/'] {
    padding-right: 15px;
    display: inline-block; /* not needed, but fixes Chrome and Opera */
}

a[href^='http://stackoverflow.com/']:after {
    font-size: x-small;
    padding-left: 1px;
    content: "SO";
    color: #333;

    position: absolute;
}

使用此代码清除text-decoration仅适用于Firefox和Opera。我无法在任何其他浏览器中使用它。：/

Firefox中不需要display: inline-block，但在Opera和Chrome中没有它，“SO”不会跟随换行符，甚至会重叠容器。

在Firefox 8中，“text-decoration”和“：after”伪元素

1 个答案: