Menu
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>
847
Use Keyboard ShortcutsPress "Ctrl-U" on your computer's keyboard to remove the underline from your selected text. This quickly reformats one underlined word, phrase or section in your document.
By setting the text-decoration to none to remove the underline from anchor tag. Syntax: text-decoration: none; Example 1: This example sets the text-decoration property to none.
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.)
Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.
88
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
