“文字装饰”和“:after”伪元素，在 Firefox 8 中

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”。阅读问题后

• “text-decoration”和“:after”伪元素，重新访问
• “text-decoration”和“:after”伪元素

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

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”不会跟随换行符，甚至会与容器重叠。