僞元素：垂直內嵌對齊

我想使用::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

僞元素：垂直內嵌對齊

回答

相關問題