境界線を持つアイコン、ボーダーホバー効果を持つ隣りのアイコン

Question

私は小さな障害物があります。私は境界線のあるアイコンを1行に並べるが、ホバー効果はアイコンの境界線の色を変更したい。

境界線2ピクセルの緑色のホバー効果を作成すると、最初の2つのアイコンが2ピクセル左に移動します。どのようにホバー効果の境界線の色を1つのアイコンの周りに異なる取得する。

アイコンは素晴らしいフォントであり、ここには表示されません。

span{ 
 
    border: 2px solid red; 
 
    &:nth-child(1), 
 
    &:nth-child(2) { 
 
     border-right: none; 
 
    } 
 
}

<a href="#"> 
 
    <span> 
 
    <i class="fa fa-bars" aria-hidden="true"></i> 
 
    </span> 
 
    <span>PL</span> 
 
    <span id="over-menu-open"> 
 
    <i class="fa fa-long-arrow-up " aria-hidden="true"></i> 
 
    </span> 
 
</a>

Answer 1

私は右のあなたを得たかどうかわからないんだけど、あなたはこれを試みることができる：

span { 
    border: 2px solid red; 

    & + & { 
    border-left-color: transparent; 
    } 
} 

上記の代わりにそれを取り除くの透明に境界線の色を設定し、したがって、要素はジャンプしません。

Answer 2

解決策は、次のspanの左の境界線を削除するためにセレクタspan:hover + spanを使用することです。

span { 
 
    border-top: 2px solid red; 
 
    border-left: 2px solid red; 
 
    border-bottom: 2px solid red; 
 
    padding: 1px; 
 
} 
 

 
span:last-child { 
 
    border-right: 2px solid red; 
 
} 
 

 
span:hover { 
 
    border: 2px solid green; 
 
} 
 

 
span:hover + span { 
 
    border-left: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<a href="#"><span><i class="fa fa-bars" aria-hidden="true"></i></span><span>PL</span><span id="over-menu-open"><i class="fa fa-long-arrow-up " aria-hidden="true"></i></span></a>