CSS “text-decoration”和“:after”伪元素，重新审视
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1238881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
“text-decoration” and the “:after” pseudo-element, revisited
提问by palm3D
I'm re-asking this questionbecause 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 :afterpseudo-class.
在我的印刷媒体样式表中，我想在使用:after伪类的每个链接之后附加 url 。
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
In Firefox (and probably Chrome but not IE8), text-decoration: noneis ignored, and the underline stretches unattractively across the bottom of the url. The colorhowever is correctly set to black for the url. Is there a way to make the text-decorationwork?
在 Firefox（可能是 Chrome，但不是 IE8）中，text-decoration: none被忽略，并且下划线在 url 的底部没有吸引力。该color然而，正确设置为黑色的网址。有没有办法让text-decoration工作？
The original questionappended 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.
的原来的问题所附固定大小的图像，而不是可变宽度的文本。它的答案使用填充和背景图像来避免使用 text-decoration 属性。当内容是可变宽度文本时，我仍在寻找解决方案。
采纳答案by MyItchyChin
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
The ':before' and ':after' pseudo-elements can be used to insertgenerated content before or after anelement's content. They are explained in the section on generated text.
...
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
5.12.3 :before 和 :after 伪元素
':before' 和 ':after' 伪元素可用于在元素内容之前或之后插入生成的内容。它们在有关生成的文本的部分中进行了解释。
...
The specification indicates that the content should be inserted before or after the element's content, not the element(i.e. <element>content:beforecontent 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.
规范指出内容应该插入在元素的内容之前或之后，而不是元素（即<元素>内容：内容之前内容：</元素>之后）。因此，在 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 元素。
回答by Elliott
If you use display: inline-blockon the :afterpseudo, the text-decorationdeclaration will work.
如果display: inline-block在:after伪上使用，则text-decoration声明将起作用。
Tested in Chrome 25, Firefox 19
在 Chrome 25、Firefox 19 中测试
回答by julia
I had the same problem and my solution was to set height and overflow:hidden
我有同样的问题，我的解决方案是设置高度和溢出：隐藏
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。
回答by oluc
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 */
}
回答by Robert Henderson
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.
唯一对我有用的是声明一个单独的重复选择器，它具有从其父级继承的相同文本装饰属性，然后在主选择器中，将文本装饰设置为无。
IE apparently does not know what to do when you set text-decoration: noneon 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.
}
回答by Célia
What I do is I add a span inside the a element, like this :
我所做的是在 a 元素中添加一个跨度，如下所示：
<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;
}
回答by Ao Li
1)
1)
:after{
position: absolute;
}
is not perfect, because element content will not wrap
不完美，因为元素内容不会换行
2)
2)
:after{
display: inline-block;
}
is not perfect, because sometimes we wish after content should always wrap with last word of element content.
并不完美，因为有时我们希望内容之后应该总是用元素内容的最后一个词包裹。
For now, I could not find find a perfect solution fits all 3 conditions(1. content could auto-wrap if it's too long 2.after content should wrap with element content, which means after content should not occupy single by it self. 3.text-decoration should only apply on element condition not apply to after content.) I thoughts for now is using other way to mimic text-decoration.
目前，我找不到适合所有 3 个条件的完美解决方案（1. 内容如果太长可以自动换行 2.after 内容应该用元素内容换行，这意味着 after 内容不应该单独占据一个。3 .text-decoration 应该只适用于元素条件而不适用于内容之后。）我现在认为是使用其他方式来模仿文本装饰。
回答by David says reinstate Monica
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):
我意识到这并没有回答您提出的问题，但是您是否有理由不能使用以下（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 */
}
As far as I know, the Firefox implementation of :afterobserves 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 betterresults...).
据我所知，Firefox 的实现:after观察的是选择器类的属性，而不是伪类。不过，可能值得尝试不同的文档类型？过渡而不是严格，有时允许不同的结果（尽管并不总是更好的结果......）。
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.
覆盖或至少隐藏text-decoration. 这并没有真正提供任何类型的答案，但至少提供了各种解决方法。
回答by David says reinstate Monica
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 来显示引号时，它在所有 IE 版本中也能很好地工作。
回答by Daniel
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 中对我有用，但未在任何其他浏览器中测试过，祝你好运！
