css – “text-decoration”和“：after”伪元素,重新访问

我重新询问 this question，因为它的答案没有在我的情况下工作。

在我的样式表中打印的媒体，我想在每个链接后使用：after伪类后添加url。

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

在Firefox(可能是Chrome但不是IE8)中，text-decoration：none被忽略，下划线在网址底部延伸。然而，对于网址，颜色被正确设置为黑色。有没有办法使文本装饰工作？

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

解决方法

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

5.12.3 The :before and :after pseudo-elements

The ‘:before’ and ‘:after’
pseudo-elements can be used to insert
generated content before or after an
element’s content. They are explained
in the section on generated text.

…

07000

规范指示内容应当在元素的内容之前或之后插入，而不是元素(即< element> content：before content< / element>之后)。因此，在Firefox和Chrome中，遇到的文本装饰不是在插入的内容上，而是在包含插入内容的父锚元素上。

我认为你的选择将使用在上一个问题中建议的background-image / padding技术，或者可能在span元素中包装您的锚点元素，而将伪元素应用于span元素。

原文地址：https://www.jb51.cc/css/221011.html