Search code examples
csshyperlinkpseudo-elementunderline

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

Solution

  • Simply apply text-decoration for the link:

    a{text-decoration:none;}

    demo