1. ホーム
  2. ハイパーリンク

[解決済み】ホバー時に太字にするとインライン要素がずれる

2022-04-02 09:35:09

質問

HTMLのリストとCSSを使って、横長のメニューを作りました。リンクの上にマウスを置いたとき以外は、すべて正常に動作します。リンクの上にカーソルを置くと、太字になるように設定したため、メニューのリンクがずれてしまいます。

と同じ問題が発生します。 このSitePointの記事 . しかし、その投稿には適切な解決策がありません。解決策をあちこちで探しましたが、見つけることができません。 きっと、これをやろうとしているのは私だけではないでしょう。

どなたかお心当たりのある方はいらっしゃいませんか?

追伸:メニューアイテムのテキストの幅がわからないので、liアイテムの幅を設定するだけではダメなのです。

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #000; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }
<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

解決方法は?

幅の事前設定 は、親のホバースタイルと同じコンテンツとスタイルを持つ不可視の疑似要素を使用することによって実現します。のようなデータ属性を使用する。 title をコンテンツのソースとして使用します。

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;
}
<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>