伪元素：垂直内联对齐

Question

我想使用::before为<span> - 标记实现某种内联前缀。
此前缀应与<span>具有相同的尺寸（填充顶部和填充底部），但背景颜色不同。

当它向左浮动时，它稍微偏移并在伪元素上方创建一个小空白区域。我在SO上找到的所有方法都提到vertical-align: bottom，但它不起作用。

如果我将两个<span> - 标签放在一起，一切正常，但我想使用伪元素，因为我只需要一个<span> - 标签，而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