_文本装饰_和_:在_伪元素之后,重新访问

IE8对伪元素:before和:after的实现不正确。火狐、Chrome和Safari都是根据CSS 2.1规范实现的。

5.12.3:伪元素之前和之后

“:before”和“:after” 伪元素可用于 插入 生成的内容在 元素的内容 . 他们被解释了 在生成文本部分。

…

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

规范指出内容应该在插入之前或之后插入 元素的内容 , 不是元素 (即<element> 内容:以前 内容 内容:后 </element>)。因此,在火狐和Chrome中,您遇到的文本装饰不是在插入的内容上,而是在包含插入内容的父锚元素上。

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

如果你使用 display: inline-block 上 :after 伪的 text-decoration 申报有效。

在Chrome 25、Firefox 19中测试

我也有同样的问题,我的解决办法是设置高度和 溢出:隐藏

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。

作为替代方案,您可以使用下边框而不是文本装饰。 假设你知道背景的颜色

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

唯一对我有用的是声明一个单独的重复选择器,该选择器具有从其父级继承的相同文本装饰属性,然后在主选择器中将文本装饰设置为“无”。

很明显你不知道该怎么办 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.
}

我知道这并不能回答你问的问题,但是你为什么不能用下面的内容呢?( 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 观察选择器类的属性,而不是psuedo类的属性。不过,尝试不同的教义可能是值得的?过渡,而不是严格,有时允许不同的结果(尽管不总是 更好的 结果……

编辑:

似乎使用

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

覆盖,或者至少隐藏 text-decoration . 这并不能提供任何答案,但至少提供了一种解决方法。

我要做的是在a元素中添加一个跨度,如下所示:

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

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

当你用后-前内容的东西做dosplaying引号的时候,它在al-ie版本中也非常有效。

内容绝对定位如下:

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

这在我的火狐3.6中很有效,但没有在其他浏览器中测试过,祝你好运!

嗨,我也遇到了这个问题,碰巧遇到了一个解决方法。

为了解决这个问题,我将URL包装在DIV中,并使用类似的方法。

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

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

1)

:after{
    position: absolute;
}

不是完美的,因为元素内容不会包装

2)

:after{
    display: inline-block;
}

不是完美的,因为有时候我们希望在内容之后总是用元素内容的最后一个字来包装。

目前,我找不到一个适合所有3个条件的完美解决方案(1.如果内容太长,可以自动换行。2.内容换行后应使用元素内容换行,这意味着内容本身不应占用单个内容。3.文本装饰仅适用于元素条件,不适用于后内容。) 我想现在是用另一种方式来模仿文本装饰。