删除内容后的文本装饰下划线

Question

我不想只使用a {text-decoration:none;}，因为我不想影响所有链接

我有一个带有class="explore"的div，除了使用css生成内容的:after之外，它没有任何内容：

    content: "Explore";
    vertical-align: top;
    text-decoration: none;

然后我用<a href="#">...</a> 包装div

这给了文本"example"一个下划线，我似乎无法删除它；我试过：

.explore a { text-decoration:none; }
.explore:after a { text-decoration:none; }
a .explore { text-decoration:none; }
a .explore:after { text-decoration:none; }

所有这些似乎都不会对文本产生任何影响。

如何删除下划线？

FIDDLE

Answer 1

如果将display: inline-block设置为::after块，下划线将消失。

Answer 2

只需为链接应用文本装饰即可：

a{text-decoration:none;}

演示

Answer 3

我的第一个问题是，为什么要在看起来很奇怪的inline元素中使用block元素。其次，您可以使您的标记简单如下。虽然您想添加块元素，但只需将display:block;添加到<a> 中即可

<a class="explore" href="#">explore</a>

风格

.explore{
    text-decoration: none;
    display: block;
}

DEMO

Answer 4

你只需要写一件事a{文字装饰：无；}