擬似要素：垂直方向のインラインアラインメント

Question

::beforeを使用して、<span>タグのインラインプレフィックスを実現します。
このプレフィックスは、<span>と同じ寸法（パディングトップとパディングボトム）である必要がありますが、背景色は異なります。

左に浮かべると、わずかにずれて擬似要素の上に小さな空白ができます。私がここで見つけたすべてのアプローチは、vertical-align: bottomを設定すると言われましたが、うまくいきません。

私は2つの<span>タグを隣り合わせに置くとすべて動作しますが、擬似要素を使用したいのは、<span>タグが1つだけで、CSSがきれいだからです。

HTML

<span>Some text I want to have here.</span> 

SCSS

span { 
    background-color: #ebebeb; 
    padding: .5em .2em .5em .2em; 

    &::before { 
     content: "Prefix:\00a0"; 
     background-color: #d1d1d1; 
     padding: .5em .2em .5em .2em; 
     float: left; 
    } 
} 

参照デモ：http://codepen.io/to7be/pen/yVJYaW

Answer 1

だけfloat: leftはそれが良いに見えるの削除：

CodePen：http://codepen.io/anon/pen/VmjvEQ

垂直配向が浮上要素で動作しません。

あなたは左側にその小さな小さなスペースを必要としない場合、あなたはmargin-left: -2px;を行うことができます。

CodePen：まずhttp://codepen.io/anon/pen/bBeVQJ