How to remove only underline from a:before?
Solution 1
Is it possible to remove this?
Yes, if you change the display style of the inline element from display:inline
(the default) to display:inline-block
:
#test p a:before {
color: #B2B2B2;
content: "► ";
display:inline-block;
}
This is because the CSS specs say:
When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
(Emphasis mine.)
Demo: http://jsfiddle.net/r42e5/10/
Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.
Solution 2
There is a Bug in IE8-11, so using display:inline-block;
alone won't work there.
I've found a solution for this bug, by explicitly setting text-decoration:underline;
for the :before-content and then overwrite this rule again with text-decoration:none;
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}
Working example here: http://jsfiddle.net/95C2M/
Update: Since jsfiddle does not work with IE8 anymore, just paste this simple demo-code in a local html file and open it in IE8:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}
</style>
</head>
<body>
<a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>
Solution 3
You can do it adding the following to the :before
element:
display: inline-block;
white-space: pre-wrap;
With display: inline-block
the underline disappears. But then the problem is that the space after the triangle collapses and is not shown. To fix it, you can use white-space: pre-wrap
or white-space: pre
.
Demo: http://jsfiddle.net/r42e5/9/
Solution 4
Wrap your links in spans and add the text-decoration to the span on the a:hover like this,
a:hover span {
text-decoration:underline;
}
I have updated your fiddle to what I think you are trying to do. http://jsfiddle.net/r42e5/4/
Related videos on Youtube
OptimusCrime
Updated on July 11, 2020Comments
-
OptimusCrime almost 4 years
I have a set of styled links using the
:before
to apply an arrow.It looks good in all browser, but when I apply the underline to the link, I don't want to have underline on the
:before
part (the arrow).See jsfiddle for example: http://jsfiddle.net/r42e5/1/
Is it possible to remove this? The test-style I sat with
#test p a:hover:before
does get applied (according to Firebug), but the underline is still there.Any way to avoid this?
#test { color: #B2B2B2; } #test p a { color: #B2B2B2; text-decoration: none; } #test p a:hover { text-decoration: underline; } #test p a:before { color: #B2B2B2; content: "► "; text-decoration: none; } #test p a:hover:before { text-decoration: none; }
<div id="test"> <p><a href="#">A link</a></p> <p><a href="#">Another link</a></p> </div>
-
Šime Vidas over 12 yearsWell, you obviously want a list... Use an UL element instead of the DIV/P combination. With lists you get the bullets (or discs, ... ) for free...
-
YuS over 12 yearsWhy not to use list with custom bullets instead of paragraphs in your case? Otherwise apply before-content to parent p, not to link itself.
-
Oriol almost 11 yearsPossible duplicate of stackoverflow.com/questions/8536015/…
-
-
OptimusCrime over 12 yearsGood idea. That was how I did it before. The problem is that this link is produced in a cms-system and our customers are filling this in as rich-text themselves.
-
Udders over 12 yearswhat language is the CMS? Could get it to spit out link and then wrap it in a span before sending it to the browser?
-
OptimusCrime over 12 yearsI have may paragraphs in my div, so that won't work. Good idea tho.
-
OptimusCrime over 12 yearsdoes not do anything. the text-decoration is ignored.
-
OptimusCrime over 12 yearsThe company is using modx. I guess I could do that as a last way out, but I really wanted to void that. Guess it's not possible. Thanks anyways.
-
Oriol almost 11 yearsYou can override a
text-decoration:underline
applied to a parent element withdisplay:inline-block
. See an example: jsfiddle.net/aZdhN/1 . Then, asker's problem can be solved like this: stackoverflow.com/a/17347068/1529630 -
Hashbrown over 10 years+1 for the
pre-wrap
hint. I was usingcontent:'►\a0'
(\a0 = ) -
Linus Caldwell over 10 yearsAs far as I can see, this does not work in Internet Explorer (tested 8-10). Any ideas how to deal with IE?
-
LeJared about 10 yearsI've found a solution that is working in IE8-11 too: stackoverflow.com/a/21902566/1607968
-
Bob Stein almost 10 yearsHad a case were IE8 underlining of a hyperlinked image could only be turned off by
<img style="text-decoration:underline">
inside (and here was the key)<a style="padding:0; border:none;">
-
user2867288 over 9 yearsUnfortunately that jsfiddle can't be verified in IE8 because jsfiddle doesn't work in IE8.
-
LeJared over 9 yearsUnfortunately I could not find any online code sharing tool that still works with IE8. I've added a code snipped to the answer above which you can just paste into an html file and open it locally in IE8.
-
saeraphin over 8 yearsTested and approved on IE9, event without two different states.
-
Fake Haak almost 8 yearsHad a link with an icon in :before that was supposed to NOT be underlined in resting state, then be underlined on hover, but not the icon. Here is what I had to do to convince IE to get this right: a {text-decoration: none} a:before {text-decoration: underline} a:before {text-decoration: none} (yes really, first underline, then overwrite with none) a:hover {text-decration: underline} a:hover:before {text-decoration: none}
-
triskweline about 7 yearsThis was the only solution that worked for me on IE11 without additional markup. Thanks!
-
kwiat1990 almost 7 yearsI don't get why it's working. It's so dumb, that I can't stop laughing but more important it has solved my problem. I've tried also other solutions but with no success. Thanks.
-
Cammy over 6 yearsSadly doesn't seem to work in combination with :nth-child in IE. Edit: Never mind! As long as you set the style before the nth-loop its fine!