title: Underline part of a link on hover of whole link
body: <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>