次の例では、フォントを使用してナビゲーション用のアイコンを作成しています。 http://www.blackcountrydesigns.co.uk/examples/green/ 私が抱えている問題は、リンクにカーソルを合わせると、リンクとアイコンの両方に下線が表示されることです。 アイコンの下線を削除してリンクに残す方法を知りたいのですが。 これが私のコードです: HTML
生成されたコンテンツから(通常)継承されたスタイルを削除するために私がまだ見つけた唯一の方法は、(コメントから)簡略化されたデモを使用して、絶対的な位置を与えることです。 リンク {{ テキスト装飾:なし; 位置:相対; マージン左:1em; } a:ホバー {{ テキスト装飾:下線; } a:前 {{ コンテンツ: '#'; 位置:絶対; 右:100%; 上:0; 下:0; 幅:1em; } JSFiddleデモ。 もちろん、このアプローチの欠点は、生成されたコンテンツ(および親要素のマージン)に明示的な幅を割り当てる必要があることです。 | 別のアプローチは、リンクのテキストを要素でラップすることです。スパン、「a」から下線を削除し、ホバー時にスパンに適用します。