重新审视“text-decoration”和“:after”伪元素答案

【问题标题】：“text-decoration” and the “:after” pseudo-element, revisited重新审视“text-decoration”和“:after”伪元素
【发布时间】：2010-11-17 08:31:41
【问题描述】：

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

在我的印刷媒体样式表中，我想使用 :after 伪类在每个链接之后附加 URL。

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

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

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

【问题讨论】：

实现这一点的最稳健的方法是基于背景图像的方法。
我重写了这个问题，以澄清我根本没有使用图像。

标签： css cross-browser pseudo-element

【解决方案1】：

我知道这并没有回答您提出的问题，但是您是否有理由不能使用以下方法（基于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 实现观察选择器类的属性，而不是伪类。不过，可能值得尝试不同的文档类型？过渡而不是严格，有时允许不同的结果（尽管并不总是更好结果......）。

编辑：

看来使用

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

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

【讨论】：

Firefox 的行为符合规范。伪选择器内容应该嵌套在选择器内。请参阅我的答案以获得澄清。
我重写了这个问题，以澄清我根本没有使用图像。

【解决方案2】：

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

5.12.3 :before 和 :after 伪元素

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

...

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

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

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

【讨论】：

经过更多测试，我发现text-decoration 没有应用，但color 是。该行为如何遵循规范？
@palm3D：你不明白的是伪选择器没有继承文本装饰，锚的文本装饰只是显示出来。如果为伪选择器设置文本装饰，它会呈现在选择器的文本装饰之上。此外，如果您为伪选择器设置背景颜色，它会正确遮盖 Firefox、Chrome 和 Safari 中选择器的文本装饰。此外，在 IE8/IE7 中切换渲染模式会极大地改变伪选择器的处理方式，因此请注意您的 DTD。
事实上当你把例如。 text-decoration: line-through; 在“父”元素上，例如。 text-decoration: underline; 在 ::before/::after 元素上，然后应用两种样式。而且由于您绝对可以对 ::before/::after 伪元素应用不同的样式，因此它更像<element><before>content:before</before>content<after>content:after</after></element> 结构而不是您所描述的结构。插入生成内容的可能性并不意味着它只是被插入的内容。
@Cromax ：我认为您没有清楚地表达您的观点，因为您所说的任何内容都与我之前的陈述相冲突。事实上，尽管试图反驳，你只是强化了我所说的。
从您的陈述，尤其是<element>content:before content content:after</element>，可以理解::before 和::after 只生成内容，而事实上，正如这个选择器名称所暗示的，它还生成伪元素。如果记住这一点，可能会更容易理解引擎盖下发生的事情。我并没有相反，我是补充或解释性的。 8)

【解决方案3】：

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

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

8以下的IE可以通过在html文件头部实现这个链接来正常工作：

<!--[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 来播放引号时，它在所有 IE 版本中也非常有效。

【讨论】：

我重写了问题以澄清我对选择器不感兴趣，只对 text-decoration 在 :after 伪类中的行为感兴趣。

【解决方案4】：

内容绝对定位如下：

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 中适用于我，但未在任何其他浏览器中测试过，祝你好运！

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

您好，我也遇到了这个问题，碰巧偶然发现了一个解决方法。

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

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

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

【讨论】：

【解决方案7】：

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

在 Chrome 25、Firefox 19 中测试

【讨论】：

但遗憾的是不在 IE 中，请参阅我的问题：stackoverflow.com/questions/18069225/…
你说对了一部分。文本装饰在这种情况下实际上根本不起作用，因为父文本装饰通常不能应用于内部内联块。如果你完全忽略了text-decoration: none，它仍然可以工作。
辉煌（边缘 42）
遗憾的是，如果您的 A 标签是 display:flex，此方法将失败。

【解决方案8】：

我遇到了同样的问题，我的解决方案是设置高度和 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;
}

它适用于 IE、FF、Chrome。

【讨论】：

看起来display: inline-block声明就够了。
如果上面的 extempl 是一个答案，而不是评论，那将是带有大勾号的答案。

【解决方案9】：

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

当您在伪元素上设置text-decoration: none 时，IE 显然不知道该怎么做，而该元素没有声明 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.
}

【讨论】：

【解决方案10】：

我所做的是在 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;
}

【讨论】：

【解决方案11】：

1)

:after{
    position: absolute;
}

并不完美，因为元素内容不会换行

2)

:after{
    display: inline-block;
}

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

目前，我找不到适合所有 3 个条件的完美解决方案（1. 如果内容太长，可以自动换行 2.after 内容应该用元素内容换行，这意味着 after 内容不应该被它占据self. 3.text-decoration 应该只适用于元素条件而不适用于之后的内容。）我现在的想法是使用其他方式来模仿文本装饰。

【讨论】：