“文本装饰”和“：后”伪元素，重新(“text-decoration” and the “:afte

我再次问这个问题 ，因为它的答案并没有我的情况下工作。

在我的样式表的印刷媒体我想用每一个环节后的URL追加:after伪类。

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
}

在Firefox（也可能Chrome，但不是IE8）， text-decoration: none被忽略，下划线整个URL的底部不吸引人延伸。 该color然而正确设置为黑色的网址。 有没有一种方法，使text-decoration工作？

的原来的问题所附固定大小的图像，而不是可变宽度的文本。 它的答案，使用填充和背景图像，以避免使用text-decoration属性。 我还在寻找一个解决方案时，内容是可变宽度的文本。

Answer 1:

IE8的实现的：before和：after伪元素是不正确。 火狐，Chrome和Safari根据CSS 2.1规范都实现了。

5.12.3：前和：后伪元素

在“：前”和“：后”伪元素可以用来插入 或前一个 元素的内容 后生成的内容 。 他们在生成文本中部分解释。

...

层叠样式表级别2版本1（CSS 2.1）规范

本说明书指出的含量应之前或该元素的内容之后被插入，而不是元件 （即<元素> 内容：前的内容的内容：后 </元件>）。 因此，在Firefox和Chrome您遇到的文字修饰是不是插入的内容，而是包含了插入的内容父锚元素。

我觉得你的选择将要使用在你前面的问题提出的背景图片/填充技术或可能在span元素包裹你的锚元素和应用伪元素的span元素来代替。

Answer 2:

如果您使用的display: inline-block对:after伪时， text-decoration的声明将起作用。

经测试在Chrome 25，Firefox的19

Answer 3:

我有同样的问题，我的解决办法是设置高度和溢出：隐藏

http://jsfiddle.net/r45L7/

a {
    text-decoration: underline;
}

a:after {
    content: "»";
    display: inline-block;
    text-decoration: none;
    height:16px;
    overflow: hidden;
    padding-left: 10px;
}

它适用于IE，FF，Chrome浏览器。

Answer 4:

作为替代方案，可以使用底部边框，而不是文字修饰。 这是假设你知道背景的颜色

a {
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:after {
  content: "foo";
  border-bottom: 1px solid white; /* same color as the background */
}

Answer 5:

只为我工作的事情是宣布与它从其父继承，然后在主选择，设置文本的装饰没有相同的text-decoration属性一个单独的重复选择。

IE显然不知道，当你设置做text-decoration: none伪元素，而不必宣布text-decoration属性（默认情况下，它在默认情况下宣布任何操作）该元素。 这没有什么意义，因为它显然是从父级继承的，但很可惜，现在我们有现代的浏览器。

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.
}

Answer 6:

我知道这是不是回答你问的问题，但有不能使用以下（一个原因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观察选择的类，而不是伪类的属性。 这可能是值得用不同的文档类型进行试验，但？ 过渡，而不是严格的，有时允许不同的结果（尽管并不总是更好的结果...）。

编辑：

看来，使用

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
    background-color: #fff; /* or whatever colour you prefer */
}

覆盖，或者至少兽皮，所述text-decoration 。 这并没有真正提供任何形式的答案，但至少提供了各种各样的解决方法。

Answer 7:

我做的是我添加一个跨度一个元素中，如下所示：

<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;
}

Answer 8:

您可以通过自动选择链接PDF的文件：

a[href$=".pdf"]:after { content: ... }

即小于8启用后可通过实现在HTML文件的头部此链接正常工作：

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

当您使用后，前方的内容事情dosplaying引号它的工作原理也是在人的IE版本非常好。

Answer 9:

内容如下计算绝对位置：

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中工作对我来说，没有任何其他浏览器进行测试，虽然，好运！

Answer 10:

您好我也有这个麻烦，以及和发生跨解决办法绊倒。

要解决它，我裹在DIV的URL和使用这样的事情。

.next_page:before {
    content: '(';
}

.next_page:after {
    content: ')';
}

Answer 11:

1）

:after{
    position: absolute;
}

是不完美的，因为元素的含量不会换行

2）

:after{
    display: inline-block;
}

是不完美的，因为有时候我们的内容后想应该总是与元素内容的最后一个字换行。

现在，我找不到找到一个完美的解决方案适合所有的三个条件（1。内容可以自动换行，如果它太长2.after内容应与元素含量，含量后，这意味着不应该由它自己占据一个包裹。3的.text装修应仅适用于内容后，不适用于元素条件）。我的想法，现在是用其他的方式来模仿文字修饰。

文章来源: “text-decoration” and the “:after” pseudo-element, revisited