css：ホバー上の異なる境界線を持つインライン要素、奇妙なアライメント

Question

3つの要素を線で並べ替えたい。ステップ番号の丸いアイコン、タイトルと右端のオプションのアイコンを垂直線で区切る。

問題は下端にあります。ボトムボーダーは要素を「拡大」するので、垂直ボーダーとボトムボーダーの境界の下にギャップがあります（実際には、私の制作コードでは、ホバー上のボーダーボトムは容器の境界底は、しかしながら、垂直境界は依然としてアイコンボタンの境界底の厚さに等しい底部にギャップを有し

以下フィドル参照：

http://codepen.io/anon/pen/wdvVBXを

HTML

<div class="step-container"> 
    <h2 class="step-title"> 
    <div class="round-icon"> 
     3 
    </div> 
    <span class="title">Migration</span> 
    </h2> 
    <div class="icon-button"> 
    <i class="fa fa-print"></i> 

    </div> 
</div> 

CSS

* { margin: 0; padding: 0;} 

.step { 

} 

.step-container { 
    display: block; 
    box-sizing: border-box; 
    border-bottom: 1px solid #ddd; 
} 

.step-title { 
    display: inline-block; 
    padding: 2rem 0 2rem 2rem; 
} 

.round-icon { 
    display: inline-block; 
    background-color: black; 
    color: white; 
    width: 2rem; 
    height: 2reml; 
    line-height: 2rem; 
    font-size: 1rem; 
    border-radius: 50%; 
    text-align: center; 
} 

.title { 
    margin-left: 1rem; 
    display: inline-block; 
    vertical-align: middle; 
} 

.icon-button { 
    float: right; 
    padding: 2rem; 
    border-left: 1px solid #ddd; 
    font-size: 1.5rem; 
    height: 100%; 

} 
.icon-button:hover { 
    border-bottom: 4px solid black; 
} 

Answer 1

あなたは代わりにボーダーの::after擬似要素を使用することができます。 http://codepen.io/meecrobe/pen/pPoMZo

Answer 2

私はこのようにそれを解決：高さアイコンボタンの自動：100％フロート：ステップ・コンテナおよびマージン左のフレックス表示右

を削除