伪元素：垂直行内对齐

Question

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

当它向左浮动时，它会稍微移动并在伪元素上方创建一点白色 space。我在 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:[=11=]a0";
       background-color: #d1d1d1;
       padding: .5em .2em .5em .2em;
       float: left;
   }
}

查看演示：http://codepen.io/to7be/pen/yVJYaW

Answer 1

只需删除 float: left 即可使其看起来不错：

代码笔：http://codepen.io/anon/pen/VmjvEQ

垂直对齐不适用于浮动元素。

如果你不想要左边那个小space，你可以做一个margin-left: -2px;:

代码笔：http://codepen.io/anon/pen/bBeVQJ

伪元素：垂直行内对齐

Pseudo-Element: Vertical inline alignment

css

vertical-alignment

pseudo-element