CODEWITHSUNDEEP
csshyperlinkpseudo-elementunderline
SaturnsEye
SaturnsEye

Reputation: 6499

Remove text-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

Upvotes: 5

Views: 5168

Answers (4)

mortiy
mortiy

Reputation: 679

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

Upvotes: 35

user3074446
user3074446

Reputation: 124

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

Upvotes: -1

Benjamin
Benjamin

Reputation: 2670

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Simply apply text-decoration for the link:

a{text-decoration:none;}

demo

Upvotes: 2

Related Questions