伪元素——“覆盖”伪元素的父元素的最佳实践答案

【问题标题】：Pseudo Elements - best practice to "over-ride" the parent of a pseudo-element伪元素——“覆盖”伪元素的父元素的最佳实践
【发布时间】：2013-10-06 19:46:03
【问题描述】：

我想使用伪元素在链接之后添加链接的href，但不保留父级的文本装饰。下面的代码显示了“a”和“a:after”具有不同的文本装饰。

a 
{
text-decoration: none;
color:#000000;
}

a:after 
{
content:  attr(href);
color:#999999;
text-decoration: underline;
padding-left: 10px;
}

即使文本装饰设置不同，“a great link”和“www.stackoverflow.com”都具有相同的文本装饰。（见下文）

<a href="wwww.stackoverflow.com">一个很棒的链接</a> wwww.stackoverflow.com

更改伪元素的文本装饰不起作用，因为它的特异性是 1。我可以解决问题的唯一方法是向链接本身添加跨度。

.underline-kludge
{
text-decoration:underline;
}

<a href="wwww.stackoverflow.com"><span class="underline-kludge">一个很棒的链接</span></a> wwww.stackoverflow.com

我对这个解决方案不满意。有没有更好的办法？是否必须向链接添加跨度才能解决此问题？

编辑 - 编辑 - 编辑

我希望伪类 (a:after) 具有与父类不同的文本装饰。我不能单独使用 css 覆盖父文本装饰。我知道如何做到这一点的唯一方法是添加一个我不想做的跨度。

【问题讨论】：

那么..您希望最终结果是什么？ a 下划线，但:after 内容没有下划线..？
你不需要span -- 将class="underline-kludge" 添加到a 标记同样可以干净利落。
你的例子在这里不是说明性的，你最好提供一个jsfiddle来重现你的问题
这里看起来有些混乱。您最初的 css 声明链接本身不应该有文本装饰，但链接后的 href 应该有一个下划线，它的工作原理就是这样。但是，您提供的跨度解决方案会强制链接的下划线也使它们都相同？
见：jsfiddle.net/MAYO/Saj2x/4

标签： html css pseudo-element

【解决方案1】：

这实际上是一个非常好的问题 - 它困扰了我一段时间。

只需在:after伪元素上设置display:inline-block，从而使text-decoration:none生效；因此不会被覆盖。

Working jsFiddle here

See a example without display:inline-block - 你会注意到这个问题。

【讨论】：

就是这样。谢谢。我讨厌使用跨度的想法。