Question

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

我有一个class="explore"的div除了:after之外没有其他内容使用css生成内容：

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

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

包裹了div

这给出了文本＆＃34;示例＆＃34;我无法删除的下划线;我试过了：

.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;}

demo

Answer 3

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

即可

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

<强>风格

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

<强> DEMO

Answer 4

你必须只写一件事一个{ 文字修饰：无; }

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

4 个答案: