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

I'm re-asking this question because its answers didn't work in my case.

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

In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class.

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

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

In Firefox (and probably Chrome but not IE8), text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the url. The color however is correctly set to black for the url. Is there a way to make the text-decoration work?

在Firefox（可能是Chrome但不是IE8）中，text-decoration：none被忽略，并且下划线在url的底部没有吸引力。但是，网址的颜色正确设置为黑色。有没有办法使文字装饰工作？

The original question appended fixed size images instead of variable width text. Its answers use padding and background images to avoid having to use the text-decoration property. I'm still looking for a solution when the content is variable width text.

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

10 个解决方案

#1

IE8's implementation of the :before and :after pseudo-elements is incorrect. Firefox, Chrome and Safari all implement it according to the CSS 2.1 specification.

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

5.12.3 The :before and :after pseudo-elements

5.12.3：before和：after伪元素

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.

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

...

...

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

层叠样式表2级修订版1（CSS 2.1）规范

The specification indicates that the content should be inserted before or after the element's content, not the element (i.e. <element>content:before content content:after</element>). Thus in Firefox and Chrome the text-decoration you're encountering is not on the inserted content but rather on the parent anchor element that contains the inserted content.

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

I think your options are going to be using the background-image/padding technique suggested in your previous question or possibly wrapping your anchor elements in span elements and applying the pseudo-elements to the span elements instead.

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

#2

If you use display: inline-block on the :after pseudo, the text-decoration declaration will work.

如果在：after伪后使用display：inline-block，则text-decoration声明将起作用。

Tested in Chrome 25, Firefox 19

在Chrome 25，Firefox 19中测试过

#3

I had the same problem and my solution was to set height and overflow:hidden

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

http://jsfiddle.net/r45L7/

a {
    text-decoration: underline;
}

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

It works on IE, FF, Chrome.

它适用于IE，FF，Chrome。

#4

As an alternative, you can use a bottom border rather than a text-decoration. This assumes that you know the color of the background

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

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

#5

I realise this isn't answering the question you're asking, but is there a reason you can't use the following (background-based approach):

我意识到这并没有回答你问的问题，但是有一个原因你不能使用以下（基于背景的方法）：

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

As far as I know, the Firefox implementation of :after observes the property of the selector's class, not the psuedo-class. It might be worth experimenting with different doctypes, though? The transitional, rather than strict, sometimes allows for different results (albeit not always better results...).

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

Edit:

编辑：

It appears that using

看来是用的

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

overrides, or at least hides, the text-decoration. This doesn't really provide any kind of answer, but at least offers a workaround of sorts.

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

#6

The only thing that worked for me was declaring a separate repeated selector with the same text-decoration property that it was inheriting from its parent, then in the main selector, setting text-decoration to none.

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

IE apparently does not know what to do when you set text-decoration: none on a pseudo element without that element having the text-decoration property declared (which by default, it has nothing declared by default). This makes little sense because it is obviously being inherited from the parent, but alas, now we have modern browsers.

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

#7

You can autoselect links to pdf-files by:

您可以通过以下方式自动选择指向pdf文件的链接：

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

IE less than 8 can be enabled to work properly by implementing this link in the head of the html-file:

通过在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]-->

It works also very good in al IE versions when you use the after-before-content-thing for dosplaying quotation marks.

当您使用after-before-content-thing进行dosplaying引号时，它在IE IE版本中的效果也非常好。

#8

Position the content absolutely as follow:

绝对定位内容如下：

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

This works for me in Firefox 3.6, not tested in any other browsers though, best of luck!

这在Firefox 3.6中适用于我，虽然没有在任何其他浏览器中测试过，祝你好运！

#9

Hi I was also having trouble with this as well and happened to stumble across a workaround.

嗨，我也遇到了这个问题，碰巧偶然发现了一个变通方法。

To get around it, I wrapped the URL in div and used something like this.

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

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

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

#10

What I do is I add a span inside the a element, like this :

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

<a href="http://foo.bar"><span>link text</span></a>

Then in your CSS file :

然后在你的CSS文件中：

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

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}

#1