我想在使用伪元素的链接之后添加链接的 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 覆盖父文本装饰。我看到如何做到这一点的唯一方法是添加一个我不想做的跨度。