How to get rid of underscore on <span> inside <a> tag with hovering?
HTML
<ul> <li><a href="#">Messages<span>1</span></a></li> </ul> CSS
a { text-decoration: none; } a:hover { text-decoration: underline; } a:hover span { text-decoration: none; } span { background-color: red; border-radius: 999px; color: white; margin-left: 2px; position: relative; top: -.5em; font-size: .75em; font-weight: bold; padding: 0 .3em; } When clicking on the link, underscore applies to <span> , although I set text-decoration: none . Is there any way to get rid of it?
Try changing the display <span> to inline-block as follows:
span { background-color: red; border-radius: 999px; color: white; margin-left: 2px; position: relative; top: -.5em; font-size: .75em; font-weight: bold; padding: 0 .3em; display: inline-block; /* <-- Added declaration */ } Description
16.3.1 Underline, overlap, accent, and blink: the text-decoration property
[...] Please note that text decorations do not apply to floating and absolutely positioned descendants or inline-level atomic stream contents, such as embedded blocks and embedded tables.
Also spec indicates (my emphasis):
It is emphasized that superscript and end-to-end lines only apply to text (including space, letter spacing and word spacing): fields, borders and spaces are omitted . User agents should not perform these text decorations on content that is not text. For example, images and inline blocks should not be underlined .
Also note that text decorations will attach to the text itself, so:
The relative positioning of the descendant moves all the text decorations affecting it along with the descendant text; this does not affect the calculation of the initial position of the decoration on this line.
add this
ul li a span { text-decoration:none; display: inline-block; }