リンク全体のホバー上のリンクの下線部分

Question

リンクの通知があり、隣に赤いディスクがあります。私はディスクやテキストにカーソルを置いて、テキストに下線が引かれるようにしたい（同じリンクに行くにはリンクのどこかをクリックしたい）。

私は、この特定の問題についてグーグルで何を見つけることができません。

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; 
} 

私はこれをどのように操作を行うことができます。私がしよう

すべてが下線だけでなく、通知のテキストを取得1のでしょうか？どうも。 （HTML 5/CSS3は、技術が幅広いブラウザをサポートしている限り問題ありません）。

Answer 1

下線を付ける部分をスパンに配置できます。

これは、特定の期間を過ぎたときに下線をオンラインにするという効果もあります。

a .ca:hover { 
 
\t text-decoration:underline; 
 
}

<a href="#" style="text-decoration:none">ABC<span class="ca">CD</span></a>

そして、あなたは、あなたがその部分にカーソルを合わせると、ちょうどこのCSSを変更するだけでなく、特定の部分のみを強調したい場合：

a:hover .ca { 
 
\t text-decoration:underline; 
 
}

<a href="#" style="text-decoration:none">ABC<span class="ca">CD</span></a>

今回はあなたにぴったりですね:-)

Answer 2

はこれを試してみてください：

a .highlight:hover { 
 
\t text-decoration:underline; 
 
}

<a href="#" style="text-decoration:none">Notif<span class="highlight">ications | Loc</span>ations</a>

Answer 3

はその後、属性として、カウントを追加し、通知が絶対位置擬似要素を数える作ることができます。そうすれば、あなたのhtmlはシンプルになります&きれいです。だから、HTMLは次のようになります。ここ

<a href="#" class="numbercircle" data-number="12">Notifications</a> 

機能例： 'オンライン' https://jsfiddle.net/p0593yz9/1/