Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get rid of underline on <span> inside <a> tag with hover?

fiddle

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 you mouse-over the link the underline is applied to the <span> even though I've set text-decoration: none. Is there a way to get rid of it?

like image 566
mpen Avatar asked Nov 25 '14 22:11

mpen


People also ask

How do I remove the underline from a span tag?

Removing an Underline To do that, simply use text-decoration:none; . To demonstrate this, the following example uses a paragraph that has been underlined, but which also contains text inside a <span> element which has had the underline removed.

How do I change the space between underline and text?

In the following “Font” dialog box, switch to “Advanced” page. Select “Raised” in the “Position” box, and enter a specific number you want in the “By” box. For example, here we enter “6 pt”. Note that the larger the value we enter, the more space there will be between texts and underline.


1 Answers

Try changing the display of <span> to inline-block as follows:

Example Here

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 */
}

Explanation

According to CSS level 2 specification, text-decoration is not propagated to the contents of nested atomic inline-level elements - such as inline-blocks and inline-tables.

16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property

[...] 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.

Also the spec states (my emphasis):

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.

Also note that text decorations would stick with the text itself, therefore:

Relatively positioning a descendant moves all text decorations affecting it along with the descendant's text; it does not affect calculation of the decoration's initial position on that line.

like image 195
Hashem Qolami Avatar answered Sep 20 '22 07:09

Hashem Qolami