ホバー上でラベルを太字にすると、コンテナが移動します

Question

ラジオボタンのラベルにカーソルを合わせると、太字になります。しかし、これにより、コンテナの幅が変更されます。最新の主要なブラウザのすべてのバージョンで動作するラベルが太字である場合、同じコンテナ幅を維持する必要がありますか？ここで

jfiddle link

私のhtmlコードです：テキストを太字に見えるようにする

.input-wrapper { 
    margin-right: 30px; 
} 

.input-wrapper label { 
    position: relative; 
    cursor: pointer; 
} 

.input-wrapper label:hover { 
    font-weight: bold; 
    transition: 0.3s font-weight; 
} 

.input-wrapper span::before, 
.input-wrapper span::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
} 

.input-wrapper span::hover { 
    cursor: pointer; 
} 
.input-wrapper span::before { 
    left: -20px; 
    width: 17px; 
    height: 17px; 
    background-color: white; 
    border-radius: 50px; 
} 

input[type="radio"] { 
    display: none; 
} 

input[type="radio"]:checked + label span::after { 
    left: -17px; 
    width: 11px; 
    height: 11px; 
    border-radius: 10px; 
    background-color: #98fbc9; 
    transition: left .25s, background-color .25s; 
} 

.group-label { 
    margin-right: 30px; 
    text-transform:uppercase; 
} 

Answer 1

使用テキストの影：

<form> 
    <div> 
    <b class="group-label">from</b> 
    <span class="input-wrapper"> 
     <input type="radio" id="from-hiragana" name="from" value="true"> 
     <label for="from-hiragana"> 
     <span>Hiragana</span> 
     </label> 
    </span> 
    <span class="input-wrapper"> 
     <input type="radio" id="from-katakana" name="from" value="true"> 
     <label for="from-katakana"> 
     <span>Katakana</span> 
     </label> 
    </span> 
    <span class="input-wrapper"> 
     <input type="radio" id="from-romaji" name="from" value="true"> 
     <label for="from-romaji"> 
     <span>Romaji</span> 
     </label> 
    </span> 
    </div> 
</form> 

そして、ここでは私のCSSコードです。あなただけの固定にラベルの位置を変更し、ラッパーのあなたの余白を右に拡張することができjsfiddle

.input-wrapper label:hover { 
    /* font-weight: bold; */ 
    text-shadow:1px 0px 0px black; 
    transition: 0.3s text-shadow; 
} 

Answer 2

を参照してください。

.input-wrapper { 
    margin-right: 100px; 
} 

.input-wrapper label { 
    position: fixed; 
    cursor: pointer; 
} 

Answer 3

あなたはあなたが

CSSを以下のようにmax-widthとflexにより取得することができます

fiddle link

を次のようにtext-shadowを使用して、それを得る

.input-wrapper label:hover { 
    /* font-weight: bold; */ 
    text-shadow:1px 0px 0px #000; 
    transition: all 0.3s linear; 
} 

を変更します

.input-wrapper { 
 
    margin-right: 30px; 
 
} 
 

 
.input-wrapper label { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
.input-wrapper label:hover { 
 
    /* font-weight: bold; */ 
 
    text-shadow:1px 0px 0px #000; 
 
    transition: all 0.3s linear; 
 
} 
 

 
.input-wrapper span::before, 
 
.input-wrapper span::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 

 
.input-wrapper span::hover { 
 
    cursor: pointer; 
 
} 
 
.input-wrapper span::before { 
 
    left: -20px; 
 
    width: 17px; 
 
    height: 17px; 
 
    background-color: white; 
 
    border-radius: 50px; 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"]:checked + label span::after { 
 
    left: -17px; 
 
    width: 11px; 
 
    height: 11px; 
 
    border-radius: 10px; 
 
    background-color: #98fbc9; 
 
    transition: left .25s, background-color .25s; 
 
} 
 

 
.group-label { 
 
    margin-right: 30px; 
 
    text-transform:uppercase; 
 
}

<form> 
 
    <div> 
 
    <b class="group-label">from</b> 
 
    <span class="input-wrapper"> 
 
     <input type="radio" id="from-hiragana" name="from" value="true"> 
 
     <label for="from-hiragana"> 
 
     <span>Hiragana</span> 
 
    </label> 
 
    </span> 
 
    <span class="input-wrapper"> 
 
     <input type="radio" id="from-katakana" name="from" value="true"> 
 
     <label for="from-katakana"> 
 
     <span>Katakana</span> 
 
    </label> 
 
    </span> 
 
    <span class="input-wrapper"> 
 
     <input type="radio" id="from-romaji" name="from" value="true"> 
 
     <label for="from-romaji"> 
 
     <span>Romaji</span> 
 
    </label> 
 
    </span> 
 
    </div> 
 
</form>