Underline part of a link on hover of whole link
<p>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).</p>

<p><a href="https://i.stack.imgur.com/zeXbm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zeXbm.jpg" alt="enter image description here"></a></p>

<p>I can find nothing in Google about this specific issue. </p>

<p>Everything I try makes the 1 get an underline as well as the notifications text:</p>

<p>HTML</p>

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

<p>CSS</p>

<pre><code>.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;
}
</code></pre>

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