ホールド時にテキストがシフトしないようにする

Question

フレックスボックスが新しく、それを使用してメニューを作成しようとしています。

私は、ユーザーがそれらの上を移動すると、下にすばらしい境界線を持つようにしたいと考えています。しかし、たとえ私がbox-sizing: border-box;を設定したとしても、予測された振る舞いではなく、テキストの位置と要素のジャンプを再計算し続けます。

私にはexampleという問題があります。私はホバリング時に要素内のコンテンツがジャンプしないようにします。

期待どおりに動作するようにするには、コードに簡単な解決策がありますか？私は私が望むものを達成するための他の方法を知っている：セットのベースラインは、相対/絶対位置を使用して...あなただけで同じ色を使用して、デフォルトでは下の枠線を設定した場合、どのような

.item { 
 
    display: flex; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #123; 
 
    color: #fff; 
 
    text-align: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 
.item:hover { 
 
    border-bottom: 10px solid lightgreen; 
 
    box-sizing: border-box; 
 
}

<div class="item"> 
 
    Content 
 
</div>

Answer 1

ホバーに10ピクセルのボーダーを追加すると、ホバー上のボックスのサイズが変更されます。それは、ホバリングの周りの要素を再配置します。

1つの解決方法は、常に境界のためのスペースを予約することです。言い換えれば、10pxの境界線を通常の状態の要素に分割します。

この境界線は、要素の背景色（またはtransparent）が表示されないようにします。ホバーでは、色を変更するだけです。

.item { 
 
    display: flex; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #123; 
 
    color: #fff; 
 
    text-align: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    position: relative; 
 
} 
 
.item::after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    border-bottom: 10px solid #123; 
 
} 
 
.item:hover::after { 
 
    border-bottom: 10px solid lightgreen; 
 
}

<div class="item">Content</div>

Answer 2

その背景に？アイテムにカーソルを合わせたら、色を変更するだけで済みます。

Answer 3

私は、この機能のためにインセットボックスシャドウを使用します。 私は:hover CSSを変更することで効果を再作成するために管理：

.item:hover { 
    box-shadow: inset 0 -10px lightgreen; 
} 

example here