从内容后删除文字装饰下划线:

Question

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

我有一个div class="explore"没有内容,除了:after使用css生成内容:

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

然后我把div包裹起来 <a href="#">...</a>

这给文本"example"一个下划线,我似乎无法删除; 我试过了:

.explore a { text-decoration:none; }

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

a .explore { text-decoration:none; }

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

这些似乎都没有影响到文本.

如何删除下划线？

小提琴

Answer 1

如果您设置display: inline-block为::after阻止,下划线将消失.

Answer 2

只需对链接应用文本装饰：

a{text-decoration:none;}

演示