如何把僞元素放在父元素的上面（和旁邊），而不影響父元素的位置

我有一個fieldset，它包含一個legend，它有一個::before僞元素，我希望這個僞元素是定位在legend之上而不影響legend的位置。如何把僞元素放在父元素的上面（和旁邊），而不影響父元素的位置

HTML：

<fieldset> 
    <legend>THE TEXT</legend> 
</fieldset>

CSS：

legend { 
    padding:0 14px; 
} 

legend::before { 
    content:'BEFORE '; 
    color:red; 
}

JSFiddle demo

我嘗試添加legend::before { vertical-align:super }但是卻讓legend元素下來是這樣的：

JSFiddle demo superscript (without success)

任何想法都將被歡迎來完成這一點。

來源

2015-06-17 Daan Heskes

是什麼「的上方和旁邊」是什麼意思？你能發佈圖片嗎？ – Oriol

這樣的僞元素上使用position: absolute;：

legend { 
    padding:0 14px; 
    position: relative; 
} 

legend:before { 
    content:'BEFORE'; 
    color:red; 
    position: absolute; 
    top: -20px; 
}

看到這個jsFiddle

編輯：

如果你想顯示的文字旁邊的傳說，然後用left屬性。

查看更新jsFiddle

來源

2015-06-17 12:05:23 Jackson

我不希望':: before'只是在'legend'元素的上面，也就是它旁邊。（好像是上標） –

你可以同時使用'top'和'left'屬性來定位你之前的元素 –

加'left：2px;' - 改變px值以滿足你的需要 – Luca

我只是找到了我自己的問題的解決方案，增加display:block;和float:left到::before使得它的作品，因爲我想要的。然後，我可以在不影響圖例的情況下爲元素添加邊距：

傳說{ padding：0 14px; }

legend::before { 
    content:'BEFORE'; 
    color:red; 
    display:block; 
    float:left; 
    margin-top:-5px; 
    padding-right:5px; 
}

JSFiddle demo

來源

2015-06-17 12:19:02

請注意，如果您使用'float：left'，'display'會計算爲'block'，即使您使用例如'display：inline'。所以'display：block'是不需要的。 – Oriol

@Oriol是的我知道，但現在沒有想過，謝謝提醒！ –

如何把僞元素放在父元素的上面（和旁邊），而不影響父元素的位置

回答

相關問題