伪元素：垂直内嵌对齐

我想使用::before来实现<span> -tag的某种内联前缀。
此前缀应具有与<span>相同的尺寸（填充顶部和填充底部），但是具有不同的背景颜色。伪元素：垂直内嵌对齐

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

如果我把两个<span>标签相邻，一切都正常，但我想使用伪元素，因为我只需要一个<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

来源

2016-11-14 to7be

刚取出float: left使它看起来不错：

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

垂直对齐不起作用的浮动元素。

如果你不想在左侧小一点空间，你可以做一个margin-left: -2px;：

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

来源

2016-11-14 14:31:55

起初我也这样想。但在最左边，有一个浅灰色的区域随着的填充而增长。很高兴知道垂直对齐浮动元素不起作用！ – to7be

@ to7be你检查了完整的答案吗？ *如果你不想在左边那个小小的空间，你可以...... * **重新加载好友！**有两个图像和两个代码。 –

重新加载作品，代码作品。谢谢：） – to7be

伪元素：垂直内嵌对齐

回答

相关问题