太字フォントが適用されるとインライン要素がホバー時に移動するのはなぜですか?また、擬似要素はこれをどのように解決できるのでしょうか?

太字スタイルによりホバー時にインライン要素が移動する

多くの開発者は、ホバー時に太字フォントが適用されるとインライン要素が移動する問題に遭遇します。たとえば、リストでは、リスト項目に動的テキスト コンテンツが含まれている場合に、この問題が発生する可能性があります。

この例では、HTML リストと CSS を使用して水平メニューが作成され、リンクを太字にするためにホバー スタイルが適用されます。ただし、太字フォントによって要素の幅が変化するため、ホバー中にメニュー項目が移動します。

擬似要素を使用した解決策

この問題に対処するには、賢い方法があります。この解決策には、非表示の疑似要素を使用して要素の幅を事前設定することが含まれます。この疑似要素の内容は親要素の内容と一致し、ホバー スタイルが適用されます。この擬似要素を視覚的に非表示にすることで、太字のホバー スタイルを適用する前に親要素の幅を効果的に事前設定できます。

変更された CSS コードは次のとおりです。

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

擬似要素を追加することで、 -要素と対応するホバー スタイルでは、要素の幅は太字のスタイルが適用される前に事前に設定されます。その結果、メニュー項目はホバー中に移動しなくなります。

使用法と考慮事項

各リンクの title 属性の値は、予想されるホバーされたテキストと一致する必要があります。 。これにより、疑似要素が各リンクの幅を正しく事前設定することが保証されます。

このソリューションは、動的テキスト コンテンツを含むインライン要素に対して特に機能することに注意することが重要です。より複雑な要素やシナリオの場合は、別のアプローチが必要になる場合があります。

以上が太字フォントが適用されるとインライン要素がホバー時に移動するのはなぜですか?また、擬似要素はこれをどのように解決できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。