从:after内容中移除文本装饰下划线

Question

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

我有一个带有class="explore"的

元素，除了: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

- SaturnsEye

---

从技术上讲，您应该将“text-decoration: none;”应用于锚标记。但是由于 CSS 中没有父选择器（尚未？），因此无法通过“.explore”来针对<a>元素。 - Hashem Qolami

Answer 1

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

- mortiy

---

这对我有用！谢谢。 - Yoraco Gonzales

非常棒的工作，效果很好。非常感谢您的答案。1+1等于2。 - Denis Bhojvani

你救了我的一天。谢谢！ - fmquaglia

Answer 2

只需为链接应用text-decoration：

a{text-decoration:none;}

演示

- Bhojendra Rauniyar

---

我不想影响所有的链接。 - SaturnsEye

然后，您可以使用父级div选择器＃parent a {text-decoration：none;}。 - Bhojendra Rauniyar

啊，我真是太傻了，我在添加链接的子元素而不是父元素！ - SaturnsEye

@SaturnsEye 这种情况有时会发生，不用担心。 - Bhojendra Rauniyar

Answer 3

我的第一个问题是，为什么你想在内联元素中使用块级元素，这看起来很奇怪。其次，你可以将你的标记简化如下。如果你想添加块级元素，只需将 <a> 添加 display:block; 即可。

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

样式

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

演示

- Benjamin

---

谢谢，我刚刚通过将类添加到“a”中来减少了我的代码。 - SaturnsEye

很高兴能帮助你。 - Benjamin

Answer 4

你只需要写一件事情 a{ text-decoration:none; }

- user3074446