在一个页面上(我为自己维护,因此可以将浏览器支持限制为 FF 3.5+)我想在每个指向 StackOverflow.com 的链接之后添加“SO”。首先我是这样做的……</p>
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 中中断:上面的下划线清除代码不起作用。所以我正在寻找解决方案。
实际上,我已经找到了一个:添加“显示:内联块”,但是:
- 它可能会导致“SO”被换行
- 它不能与旧的下划线清除代码一起使用,因为它
padding-bottom
被添加到链接本身
最后说明:我希望它至少在 FF 3.5 和 FF 8 中工作,仅使用 CSS,而不使“SO”文本成为图像,比inline-block
解决方案更好