如何在父元素的上方(和旁边)放置一个:: before伪元素,而不影响父元素的位置

Question

我有一个fieldset含有一个legend具有::before伪元素,我想这个伪元件被定位在所述legend而不影响legend的位置.

HTML:

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

CSS:

legend {
    padding:0 14px;
}

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

JSFiddle演示

我尝试添加,legend::before { vertical-align:super }但它将legend元素放下来像这样:

JSFiddle演示上标(没有成功)

任何想法都欢迎这样做.

Answer 1

position: absolute;像这样使用伪元素:

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

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

看到这个jsFiddle

编辑:

如果您希望文本显示在图例旁边,请使用该left属性.

查看更新的jsFiddle