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

Question

I have a fieldset containing a legend that has a ::before pseudo-element and I want this pseudo-element to be positioned above the legend without affecting the legend 's position.

HTML:

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

CSS:

legend {
    padding:0 14px;
}

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

JSFiddle demo

I tried adding legend::before { vertical-align:super } but it puts the legend element down like this:

JSFiddle demo superscript (without success)

Any idea's would be welcome to accomplish this.

Answer 1

Use position: absolute; on the pseudo element like this:

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

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

See this jsFiddle

EDIT:

If you would like the text to appear beside the legend then use the left attribute.

See updated jsFiddle

Answer 2

I just found a solution for my own question, adding display:block; and float:left to the ::before makes it works as I want. I could then add margins to the element as I wanted without affecting the legend:

legend { padding:0 14px; }

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

JSFiddle demo