伪元素 - “覆盖”伪元素的父级的最佳实践

时间:2013-10-06 19:46:03

标签: html css pseudo-element

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

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

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

即使文本修饰设置不同,“一个很棒的链接”和“www.stackoverflow.com”都有相同的文本修饰。 (见下文)

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

更改伪元素的文本修饰不起作用,因为它的特异性是1.我能解决问题的唯一方法是在链接本身添加一个span。

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

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

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

编辑 - 编辑 - 编辑

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

1 个答案:

答案 0 :(得分:2)

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

只需在display:inline-block伪元素上设置:after,即可使text-decoration:none生效;因此不会被覆盖。

Working jsFiddle here


See a example without display:inline-block - 您会发现问题。