Псевдоэлемент: вертикальное выравнивание линии

Question

Я хочу использовать ::before для получения своего рода встроенного префикса для <span> -tag.
Этот префикс должен иметь одинаковые размеры (отступы и верхняя часть) как <span>, но с другим фоном.

При плавании влево он слегка сдвинут и создает немного белого пространства над псевдоэлементом. Все подходы, которые я нашел здесь на SO, упомянули, чтобы установить vertical-align: bottom, но он не работает.

Если я размещаю два <span> -tags рядом друг с другом, все работает, но я хочу использовать псевдоэлемент, так как мне нужен только один <span> -tag, а 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