Search code examples
csshyperlinkunderline

Stop link's :before content from being underlined by rule applied to the link

I have a text link that is underlined when hovered. I'm adding at the beginning of the link a > symbol using the following code:

.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; }
.box.blueb a:before:hover { text-decoration: none; }

But what I don't want the > symbol underlined when the link is hovered. How do I achieve this?

Solution

  • http://jsfiddle.net/thirtydot/LmvgM/1/

    You need to wrap a span around the text inside the a:

    <div class="box blueb">
    <a href="#"><span>Hello</span></a>
</div>

    And then change your CSS to this:

    .box.blueb a { color: #0098aa; text-decoration: none; }
.box.blueb a:hover > span { text-decoration: underline; }
.box.blueb a:before { content: "> "; }

    .box.blueb a:before:hover { text-decoration: none; } doesn't work because when you set text-decoration: underline on an element (the a), you can't then remove it on a descendant (:before).