在图例的规则帐户之前，我如何拥有fieldset :::？

Question

I'm placing content in ::before rules on each of the fieldsets in my form, but they seem to be placed under the legend of the field, not as the first child like I would expect. I would like to have the ::before content justified with the top of the legend, not the top of the input elements. It isn't enough to shift the ::before content vertically across the board because my legends are different heights. Does anyone know why this is happening and how to get the behavior I want?

Expected behavior:

before    legend
          legend
          legend

          input

HTML:

<form>
    <fieldset>
        <legend>This is the legend.</legend>
        <input type="text" />
    </fieldset>
    <fieldset>
       <legend>This is a very very very very very very very very very very very very very very very very very very very very very long legend.</legend>
       <input type="text" />
    </fieldset>
</form>​

CSS:

fieldset
{
    margin-left: 40px;
    width: 120px;
}

fieldset::before
{
    margin-left: -40px;
    float: left;

    content: "before";
}​

http://jsfiddle.net/GYzTA/2/

EDIT:

I found a "doh" solution of just changing the CSS selector, but I'm still curious why the fieldset::before rule seems to insert the content after the legend.

fieldset legend::before
{
    margin-left: -40px;
    content: "before";
}​

Answer 1

Referencing Default CSS values for a fieldset <legend>

Simply put, it is not possible across browsers to position the LEGEND element in a Fieldset.

Solution: Use <span> instead of <legend>