Remove text-decoration underline from :after content

Question

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

You should technically apply `text-decoration: none;` to the anchor tag. However since there's no parent selector in CSS (yet?) there's no way to target the `` element by `.explore`. — Hashem Qolami, Sep 02 '14 at 10:41

score 34 · Answer 1 · answered Apr 23 '15 at 10:25

34

If you'll set display: inline-block to ::after block, underline will disappear.

answered Apr 23 '15 at 10:25

mortiy

669
7
9

1

This did it to me! Thx. – Yoraco Gonzales Mar 12 '16 at 08:35
1

Nice work like charm. Thank you so much for your answer. 1+ – Denis Bhojvani Jul 27 '17 at 17:09
You saved my day. Thanks! – fmquaglia Mar 22 '19 at 02:28

score 1 · Accepted Answer · answered Sep 02 '14 at 10:37

1

Simply apply text-decoration for the link:

a{text-decoration:none;}

demo

answered Sep 02 '14 at 10:37

Bhojendra Rauniyar

83,432
35
168
231

I don't want to affect all links though – SaturnsEye Sep 02 '14 at 10:40
Then you can use parent div selector `#parent a{text-decoration:none;}` – Bhojendra Rauniyar Sep 02 '14 at 10:41
Ahh so silly of me, I was adding to the child of the link not the parent! – SaturnsEye Sep 02 '14 at 10:43
@SaturnsEye this happens sometime. no worry. – Bhojendra Rauniyar Sep 02 '14 at 10:44

Benjamin · Answer 3 · 2014-09-02T10:48:39.163

1

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

edited Sep 02 '14 at 10:48

answered Sep 02 '14 at 10:42

Benjamin

2,612
2
20
32

Thank you, I've just reduced my code down by adding the class to the `a` – SaturnsEye Sep 02 '14 at 10:49
Pleasure helping you. – Benjamin Sep 02 '14 at 10:51

score -1 · Answer 4 · answered Sep 02 '14 at 10:52

-1

You have to write one thing only a{ text-decoration:none; }

answered Sep 02 '14 at 10:52

user3074446

124
10

Remove text-decoration underline from :after content

4 Answers4