“文本装饰”和“：后”伪元素，重新

Question

我再次问这个问题，因为它的答案在我的情况没有工作。

在我的样式表的印刷媒体我想用:after伪类的每一个环节之后到URL追加。

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

在火狐（也可能Chrome，但不IE8），text-decoration: none被忽略，并且下划线跨越链接的底部不吸引人延伸。该color但是正确设置为黑色的网址。有没有办法让text-decoration工作？

所附固定大小的图像，而不是可变宽度的原来的问题文本。它的答案，使用填充和背景图像，以避免使用text-decoration属性。我还在寻找用于当所述内容是可变宽度的文本中的溶液。

Answer 1

IE8的实现的：前和：后伪元素不正确。 Firefox，铬和Safari根据CSS 2.1规范的所有实现它。

  

<强> 5.12.3的：前和：后伪元素

     

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

     

...

     

层叠样式表级别2版本1（CSS 2.1）规范

在规范指示该内容应之前或之后的元素的含量，<强>不是元素（即<元件> 内容被插入：前含量内容：后 ）。因此，在Firefox和Chrome您遇到的文字修饰是不是插入的内容，而是包含了插入的内容父锚元素。

我想你的选项将使用在前面的问题提出的背景图像/填充技术或可能包装您的锚定元件在跨度元件以及将所述伪元素向跨度元件代替。

Answer 2

如果您在display: inline-block伪使用:after，该text-decoration声明将工作。

测试在铬25，火狐19

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，铬。

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的事情。

IE显然不知道什么时候你无需声明的text-decoration属性（默认情况下，它在默认情况下宣布无）该元素伪元素上设置text-decoration: none做什么。这没有什么意义，因为它显然是从父级继承的，但很可惜，现在我们有现代的浏览器。

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

我要做的就是我添加一个跨度的一个元件的内部，这样的：

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

我知道这是不是回答你问的问题，但有不能使用以下（基于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 */
}

据我所知，Firefox的执行:after的观察选择的类，而不是伪类的属性。这可能是值得用不同的文档类型进行试验，但？过渡，而不是严格的，有时允许不同的结果（尽管并不总是更好的结果...）。

编辑：

看来，使用

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

覆盖，或者至少兽皮，所述text-decoration。这并没有真正提供任何形式的答案，但至少提供了各种各样的解决办法。

Answer 8

可以通过自动选择链接PDF的文件：

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

IE小于8可经启用以通过实现在HTML文件的头部此链接正常工作：

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

它的工作原理也是人IE版本非常好，当你使用后，前方的内容事情dosplaying引号。

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

您好我还具有这样的麻烦，以及和发生跨一种变通方法绊倒。

要避开它，我裹在DIV的URL和使用这样的事情。

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

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

Answer 11

1）

:after{
    position: absolute;
}

是不完美的，因为元件的内容将不会包裹

2）

:after{
    display: inline-block;
}

是不完美的，因为有时候我们的内容后想应该总是与元素内容的最后一个单词换行。

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