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

Question

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?

Answer 1

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).

Answer 2

http://jsfiddle.net/LmvgM/8/

It can be achieved with css only, without additional html markup by setting position:relative to the link, and respectively position:absolute to :before content.

Using this example...

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

... the css will look like this:

.box.blueb a { 
    color: #0098aa; 
    position: relative;
    margin-left: 5px;
    padding-left: 10px;
    text-decoration: none;
}

.box.blueb a:before { 
    content: "> "; 
    position: absolute;
    top: 0;
    left: 0;
}

.box.blueb a:hover {
    text-decoration: underline;
}

Answer 3

You can do it css only adding display: inline-block to the :before element:

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

Demo: http://jsfiddle.net/CaNyx/

---

Edit:

The problem is that with display: inline-block the space is not shown, but you can fix it with white-space: pre or white-space: pre-wrap

Demo: http://jsfiddle.net/CaNyx/1/