decoration underline from :after content

I don't want to use just a {text-decoration:none;} as I don't want to affect all links

I have a div with class="explore" that has no content except :after which generates the content using css:

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

I have then wrapped the div with <a href="#">...</a>

This give the text "example" an underline which I can't seem to remove; I've tried:

.explore a { text-decoration:none; }

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

a .explore { text-decoration:none; }

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

None of which seem to affect the text at all.

How can I remove the underline?

FIDDLE

---

Simply apply text-decoration for the link:

a{text-decoration:none;}

demo

---

如果您将display: inline-block为::after block，则下划线将消失。

---

My first question why do you want to use a block element inside an inline element which looks odd. Secondly you can make your markup just simple as below. Though you want to add block elements just add display:block; to your <a>

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

STYLE

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

DEMO

链接地址: http://www.djcxy.com/p/74618.html

上一篇: 从链接中删除下划线

下一篇: 装饰强调来自：内容之后