legend not including ::before while h2 does

Question

Why is it that the legend element will not change clientHeight when you ::before content into it, while an h2 will, even if both have height: auto; display: block;?

let h2 = document.querySelector('h2')
let legend = document.querySelector('legend')

console.log('h2:', h2.clientHeight+'px')
console.log('legend:', legend.clientHeight+'px')

body { padding: 200px 0; }
h2::before,
legend::before {
  content: "";
  display: block;
  height: 150px;
  margin-top: -150px;
}

h2, legend {
  background-color: rgba(0,0,0,.1);
  display: block !important;
  height: auto !important;
}

<fieldset>
  <h2>Headline 2</h2>
</fieldset>

<fieldset>
  <legend>Legend</legend>
</fieldset>

Answer 1

The problem is nothing to do with pseudo elements, really, but rather to do with the fact that you've got your legends inside of fieldsets, which are "damn near impossible to style".

You can either try to fight the browser styling of fieldsets and their associated legend elements (the article I linked above is a pretty good resource if you want to try to), or you can remove the fieldsets from your HTML (as the article mentions, even though fieldsets are the most semantic way to group sets of form fields, many people avoid them), or you can use a different element besides a legend element inside of the fieldsets.

Here is a snippet illustrating pseudo elements vs real elements and with fieldsets vs without fieldsets. As you can see, the height of the legend is 0 whether it's a pseudo element or not dependent entirely on whether it is wrapped in a fieldset element:

console.log('h2 pseudo without fieldsets:', document.querySelector('.pseudo.no-fieldsets h2').clientHeight+'px');

console.log('legend pseudo without fieldsets:', document.querySelector('.pseudo.no-fieldsets legend').clientHeight+'px');

console.log('h2 pseudo with fieldsets:', document.querySelector('.pseudo.with-fieldsets h2').clientHeight+'px');

console.log('legend pseudo with fieldsets:', document.querySelector('.pseudo.with-fieldsets legend').clientHeight+'px');

console.log('h2 real without fieldsets:', document.querySelector('.real.no-fieldsets h2').clientHeight+'px');

console.log('legend real without fieldsets:', document.querySelector('.real.no-fieldsets legend').clientHeight+'px');

console.log('h2 real with fieldsets:', document.querySelector('.real.with-fieldsets h2').clientHeight+'px');

console.log('legend real with fieldsets:', document.querySelector('.real.with-fieldsets legend').clientHeight+'px');

body * {
	background-color: rgba(0,0,0,.1);
}

h2::before,
legend::before {
  content: "";
  display: block;
  height: 150px;
  margin-top: -150px;
}

h2, legend {
  display: block !important;
  height: auto !important;
}

<div class="pseudo no-fieldsets">
  <p>pseudo element version without fieldsets</p>
  <h2></h2>
  <legend></legend>
</div>
<div class="real no-fieldsets">
  <p>real element version without fieldsets</p>
  <h2>
    <div></div>
  </h2>
  <legend>
    <div></div>
  </legend>
</div>
<div class="pseudo with-fieldsets">
  <p>pseudo element version with fieldsets</p>
  <fieldset>
    <h2></h2>
  </fieldset>
  <fieldset>
    <legend></legend>
  </fieldset>
</div>
<div class="real with-fieldsets">
  <p>real element version with fieldsets</p>
  <fieldset>
  <h2>
    <div></div>
  </h2>
  </fieldset>
  <fieldset>
  <legend>
    <div></div>
  </legend>
  </fieldset>
</div>