niico niico - 15 days ago 5
CSS Question

Underline part of a link on hover of whole link

I have a link - notifications - with a red disc next to it. I would like hover on the disc OR text to result in the text only being underlined (I also would like clicking anywhere in link to go to the same link).

enter image description here

I can find nothing in Google about this specific issue.

Everything I try makes the 1 get an underline as well as the notifications text:

HTML

<div class="col-sm-offset-4 col-sm-5" id="nav">
<div class="userbox">
<a href="#"><span class="numbercir">1</span> Notifications</a> |
<a href="~/Signin">Signin</a> | <a href="~/Signup">Signup</a>
</div>
</div>


CSS

.numbercir {
border-radius: 3px;
height: 16px;
width: 16px;
padding: 2px 3px;
background: #f00;
color: #fff;
text-align: center;
font: 12px Arial, sans-serif;
}
/* This doesn't work - ie doesn't stop the 1 getting an underline */
a .numbercircle:hover {
text-decoration: none !important;
}


How can I do this? Thx. (HTML 5 / CSS3 are fine as long as the technique has wide browser support).

Answer

You can put the part you want to be underlined in a span.

This has also the effect, that you will online get the underline, when you go over that specific span.

a .ca:hover {
	text-decoration:underline;
}
<a href="#" style="text-decoration:none">ABC<span class="ca">CD</span></a>

And in case you want to underline only a certain part not only when you hover over that part, just change css to this:

a:hover .ca {
	text-decoration:underline;
}
<a href="#" style="text-decoration:none">ABC<span class="ca">CD</span></a>

I hope I got you right this time :-)