“文字修饰”和“后”伪元素，重新审视
我正在重新问这个问题，因为它的答案在我的情况下是行不通的。
在我的印刷媒体样式表中，我想在每个链接之后使用:after伪类追加url。
a:after { content: " <" attr(href) ">"; text-decoration: none; color: #000000; }
在Firefox（也可能是Chrome浏览器，但不是IE8）中， text-decoration: none被忽略，下划线延伸到url的底部。 但是， color正确设置为黑色的url。 有没有办法使text-decoration工作？
原始问题附加了固定大小的图像，而不是可变宽度的文本。 它的答案使用填充和背景图像，以避免使用文本修饰属性。 当内容是宽度可变的文本时，我仍然在寻找解决scheme。
IE8的执行：之前和之后：伪元素是不正确的。 Firefox，Chrome和Safari都根据CSS 2.1规范来实现它。
5.12.3：之前和之后：伪元素
可以使用'：before'和'after'伪元素在 元素的内容 之前或之后 插入 生成 的内容 。 他们在生成的文本部分解释。
…
层叠样式表级别2修订1（CSS 2.1）规范
该规范指出内容应该在元素的内容之前或之后插入， 而不是元素 （即<element> content：在 content content： 之前 </ element>之前）。 因此，在Firefox和Chrome中，遇到的文本修饰不在插入的内容上，而是在包含插入内容的父锚元素上。
我认为你的select将使用在你以前的问题中提出的背景图像/填充技术，或者可能将你的锚元素包装在span元素中，并将伪元素应用到span元素。
如果在:after伪代码上使用display: inline-block ，则text-decoration声明将起作用。
在Chrome 25，Firefox 19上testing
作为替代，您可以使用底部边框而不是文本修饰。 这假定你知道背景的颜色
a { text-decoration: none; border-bottom: 1px solid blue; } a:after { content: "foo"; border-bottom: 1px solid white; /* same color as the background */ }
我有同样的问题，我的解决scheme是设置高度和溢出：隐藏
a { text-decoration: underline; } a:after { content: "»"; display: inline-block; text-decoration: none; height:16px; overflow: hidden; padding-left: 10px; }
它适用于IE，FF，Chrome。
我意识到这不是回答你问的问题，但有没有一个原因，你不能使用以下（基于background的方法）：
a.file_pdf { background-image: url(images/pdf.png); background-position: center right; background-repeat: no-repeat; padding-right: 15px; /* or whatever size your .png image is plus a small margin */ }
据我所知，Firefox的实现:after观察select器类的属性后，不是伪类。 虽然这可能值得尝试不同的文档types？ 过渡性的，而不是严格的，有时允许不同的结果（虽然不总是更好的结果…）。
编辑：
看来，使用
a:after { content: " <" attr(href) ">"; text-decoration: none; color: #000000; background-color: #fff; /* or whatever colour you prefer */ }
覆盖或者至less隐藏text-decoration 。 这并没有提供任何答案，但至less提供了一个解决方法。
唯一对我有用的是声明一个单独的重复select器，它具有相同的文本修饰属性，它从它的父级inheritance，然后在主select器中，将文本修饰设置为无。
IE浏览器显然不知道该怎么做，当你设置text-decoration: none一个伪元素没有声明文本装饰属性声明（默认情况下，它没有声明默认情况下）没有。 这是没有道理的，因为它显然是从父母inheritance，但唉，现在我们有了现代浏览器。
span.my-text { color: black; font-size: 12px; text-decoration: underline; } span.my-text:after { text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below } span.my-text:after { color: red; text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element. }
您可以通过以下方式自动select指向pdf文件的链接：
a[href$=".pdf"]:after { content: ... }
通过在html文件的头部实现这个链接，可以启用小于8的IE来正常工作：
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
当你使用dos-引号后面的内容之前的东西时，它在IE版本中也是非常好的。
内容的绝对位置如下：
a { position: relative; margin: 0 .5em; font-weight: bold; color: #c00; } a:before, a:after { position: absolute; color: #000; } a:before { content: '<'; left: -.5em; } a:after { content: '>'; right: -.5em; }
这适用于我在Firefox 3.6，但没有在任何其他浏览器testing，祝你好运！
嗨，我也遇到了这个问题，碰巧遇到了一个解决方法。
为了解决这个问题，我用div封装了URL，并使用了类似的东西。
.next_page:before { content: '('; } .next_page:after { content: ')'; }
我所做的是我在一个元素内添加一个span，就像这样：
<a href="http://foo.bar"><span>link text</span></a>
然后在你的CSS文件中：
a::after{ content:" <" attr(href) "> "; color: #000000; } a { text-decoration:none; } a span { text-decoration: underline; }
