重新审视"text-decoration"和":after"伪元素

我重新问这个问题,因为它的答案在我的案例中不起作用.

在我的打印媒体样式表中,我想在使用:after伪类的每个链接后附加url .

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

在Firefox(可能是Chrome但不是IE8)中,text-decoration: none被忽略,并且下划线在URL的底部没有吸引力.该color然而,正确设置为黑色的网址.有没有办法让text-decoration工作？

的原来的问题所附固定大小的图像,而不是可变宽度的文本.它的答案使用填充和背景图像,以避免使用文本修饰属性.当内容是可变宽度文本时,我仍在寻找解决方案.

1> Elliott C..：

---

如果您使用display: inline-block的:after假,该text-decoration声明将工作.

在Chrome 25,Firefox 19中测试过

---

你是部分正确的.在这种情况下,文本修饰实际上根本不起作用,因为父文本修饰通常不能应用于内部内联块.如果你完全忽略了`text-decoration:none`,它仍然可以工作.

---

但遗憾的是不在IE中,请看我的问题:http://stackoverflow.com/questions/18069225/applying-text-decoration-on-css-generated-content-in-ie

2> MyItchyChin..：

---

IE8的执行:before和:after伪元素不正确.Firefox,Chrome和Safari都根据CSS 2.1规范实现它.

5.12.3:before和:after伪元素

':before'和':after'伪元素可用于在元素内容之前或之后插入 生成 的内容.它们在生成的文本部分中进行了解释.

...

层叠样式表2级修订版1(CSS 2.1)规范

规范表明内容应该插入元素内容之前或之后,而不是元素(即 content:在内容之前: 之后).因此,在Firefox和Chrome中,您遇到的文本修饰不在插入的内容上,而是在包含插入内容的父锚元素上.

我认为您的选项将使用前一个问题中建议的背景图像/填充技术,或者可能将锚元素包含在span元素中,并将伪元素应用于span元素.

---

@ palm3D:你不理解的是伪选择器不是继承文本修饰,锚的文本修饰只是通过显示.如果为伪选择器设置文本修饰,则会在选择器的文本修饰之上呈现它.此外,如果您为伪选择器设置背景颜色,它会在Firefox,Chrome和Safari中正确地显示选择器的文本装饰.此外,在IE8/IE7中的渲染模式之间切换会显着改变伪选择器的处理,因此请观察您的DTD.

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.

---

看起来像`display:inline-block`声明就足够了.

4> oluc..：

---

作为替代方案,您可以使用底部边框而不是文本修饰.这假设您知道背景的颜色

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