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

Question

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

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

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

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

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

Answer 1

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

在Chrome 25,Firefox 19中测试过

Answer 2

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

5.12.3:before和:after伪元素

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

...

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

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

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

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

1）

:after{
    position: absolute;
}

并不完美，因为元素内容不会换行

2）

:after{
    display: inline-block;
}

并不完美，因为有时我们希望内容后面应该始终包含元素内容的最后一个单词。

目前，我找不到适合所有3个条件的完美解决方案（1.如果内容太长，可以自动换行2.after内容应该与元素内容一起换行，这意味着after内容不应该单独占据单个内容。3 .text-decoration 应该只适用于元素条件，不适用于之后的内容。）我现在的想法是使用其他方式来模仿文本装饰。

Answer 6

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

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