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?

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

回答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;
}

回答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/

回答4:

Try this if you want a CSS only solution. For it to work in IE, you need to explicitly turn it on before you turn it off for the pseudo elements:

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before { text-decoration:underline;}
a:before,
a:hover:before {text-decoration:none;}

So in your example you would need it to be written:

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

回答5:

This question was also asked at :hover:before text-decoration none has no effects? and answer https://stackoverflow.com/a/13376725/261747 worked for me in IE too.

回答6:

I know this doesn't answer how to stop an anchor's before content from being underlined.
But the best work-around I find when I need this behavior is not using a:before.

HTML:

<nav class="breadcrumb">
    <span><a href="#">Test 1</a></span>
    <span><a href="#">Test 2</a></span>
    <span><a href="#">Test 3</a></span>
</nav>

CSS:

nav.breadcrumb > span:before             { content: "> "; }
nav.breadcrumb > span:first-child:before { content: "";   }

So, specifying :before pseudo-class for the element that wraps the anchor, instead of the anchor itself seems like the best solution at the moment.

Another example if you prefer using lists:

HTML:

<ul class="breadcrumb">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</ul>

CSS:

ul.breadcrumb                         { margin: 0; padding: 0; }
ul.breadcrumb > li                    { display: inline;       }
ul.breadcrumb > li:before             { content: "> ";         }
ul.breadcrumb > li:first-child:before { content: "";           }

来源：https://stackoverflow.com/questions/8536015/stop-links-before-content-from-being-underlined-by-rule-applied-to-the-link

标签

css

hyperlink

underline