51

我重新问了这个问题，因为它的答案对我来说不起作用。

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

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

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

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

4

11 回答 11

121

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

在 Chrome 25、Firefox 19 中测试

于 2013-03-28T17:23:13.580 回答
22

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

5.12.3 :before 和 :after 伪元素

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

...

级联样式表第 2 级修订版 1 (CSS 2.1) 规范

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

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

于 2009-08-06T14:11:16.593 回答
9

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

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。

于 2014-05-30T17:30:15.870 回答
6

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

a {
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:after {
  content: "foo";
  border-bottom: 1px solid white; /* same color as the background */
}
于 2012-10-08T09:30:29.747 回答
4

我所做的是在 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;
}
于 2017-04-28T12:41:25.600 回答
3

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

当您在没有声明 text-decoration 属性的元素上设置伪元素时，IE 显然不知道该怎么做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.
}
于 2016-05-25T18:12:51.213 回答
3

1)

:after{
    position: absolute;
}

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

2)

:after{
    display: inline-block;
}

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

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

于 2018-10-17T23:27:59.413 回答
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 */
}

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

编辑：

看来使用

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

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

于 2009-08-06T13:58:01.260 回答
0

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

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

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

当您使用 after-before-content-thing 来播放引号时，它在所有 IE 版本中也非常有效。

于 2009-08-06T20:15:58.100 回答
0

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

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

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

.next_page:after {
    content: ')';
}
于 2013-03-11T01:37:52.833 回答
0

将内容绝对定位如下：

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

于 2010-10-06T15:37:10.760 回答