Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 317
Scott Avatar asked Dec 16 '11 15:12

Scott


People also ask

How do you remove the underline from all hyperlinks by using CSS code?

To finally remove the default underline of the link, you can target all the pseudo-classes and assign them a text-decoration property of none .


3 Answers

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

like image 168
thirtydot Avatar answered Oct 02 '22 16:10

thirtydot


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;
}
like image 26
roushan Avatar answered Oct 02 '22 15:10

roushan


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/

like image 20
Oriol Avatar answered Oct 02 '22 14:10

Oriol