Stop link's :before content from being underlined by rule applied to the link
css, hyperlink, underline
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`).
Problem
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?