css - 从 :after content 删除文本装饰下划线

Question

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

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

    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块，下划线将消失。