Question

我正在重新询问this question，因为它的答案在我的案例中不起作用。

在我的打印媒体样式表中，我希望使用:after伪类在每个链接后追加网址。

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

在Firefox（可能是Chrome但不是IE8）中，text-decoration: none被忽略，并且下划线在网址底部没有吸引力。但是，对于网址，color正确设置为黑色。有没有办法让text-decoration工作？

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

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：之前和之后的伪元素

'之前'和'：之后'   伪元素可用于插入   在之前或之后生成的内容   元素的内容。他们被解释了   在生成的文本部分。

...

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

规范表明内容应在元素的内容之前或之后插入，不是元素（即＆lt; element＆gt; content：before content content：after ＆lt; / element＆gt;）。因此，在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

对我来说唯一有效的方法是声明一个单独的重复选择器，它具有相同的文本修饰属性，它从父节点继承，然后在主选择器中，将text-decoration设置为none。

当你在伪元素上设置text-decoration: none而没有声明了text-decoration属性的元素时，IE显然不知道该做什么（默认情况下，它默认没有声明）。这没什么意义，因为它显然是从父母那里继承而来的，但唉，现在我们有了现代浏览器。

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 */
}

据我所知，:after的Firefox实现观察了选择器类的属性，而不是psuedo类。但是，可能值得尝试不同的doctypes？过渡性而非严格性有时会产生不同的结果（尽管并不总是更好的结果......）。

编辑：

似乎正在使用

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

覆盖或至少隐藏text-decoration。这并没有真正提供任何答案，但至少提供了各种解决方法。

Answer 7

我所做的是在一个元素中添加一个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;
}

Answer 8

您可以通过以下方式自动选择指向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]-->

当您使用after-before-content-thing进行dosplaying引号时，它在IE 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

嗨我也遇到了麻烦，碰巧遇到了解决方法。

为了解决这个问题，我将URL包装在div中并使用了类似的东西。

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

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

Answer 11

1）

:after{
    position: absolute;
}

并不完美，因为元素内容不会包装

2）

:after{
    display: inline-block;
}

并不是完美的，因为有时我们希望内容之后总是用元素内容的最后一个字换行。

就目前而言，我找不到适合所有3个条件的完美解决方案（1.如果内容太长，则内容可以自动包装。2。在内容应包含元素内容之后，这意味着在内容不应该占据单个内容之后3.文本修饰仅适用于元素条件，不适用于后续内容。）我认为目前正在使用其他方式来模仿文本装饰。

重新审视“text-decoration”和“：after”伪元素

11 个答案: