Css ::before bug on Firefox

Question

This my css code for h1:

h1 {
  padding: 5px 12px;
  background-color: #00addc;
  display: unset;
  margin-top: 0 !important;
  margin-bottom: 2px;
}

h1::after {
  content: '';
  display: block;
  margin-bottom: 25px;
  height: 1px;
  float: left;
  width: 100%;
}

h1::before {
  content: '';
  display: block;
  height: 1px;
  float: left;
  width: 100%;
  background-color: #00addc;
  margin-bottom: 2px;
}

<h1>Advocacy documents</h1>

Works well on Safari but bugs on firefox… Any idea??

On Safari: Safari

On Firefox: Firefox

Answer 1

Sorry if the explanations, is jerky and all over the place. this matter needs it's own proper article.

I think i found the issue or why that is happening, This is more of what's happening rather than an answer to the question.

This is either a bug in Firefox or Firefox doesn't manage everything for you.

The structure you have is this :

<Inline Level Element> (h1)
    <Block Level Element> (:before)
    <Inline Level Element> (the text which is an inline level element can be a block level element)
    <Block Level Element> (:after)
</Inline Level Element> (/h1)

What say you we try to replicate it ?

.inlineElement {
  display: inline;
  padding: 0px 20px;
  background-color: red;
}

.inlineElement>span {
  background-color: orange;
}

.BlockElement {
  display: block;
  background-color: brown;
  height: 10px;
  width: 100%;
}

<div class="inlineElement">
  <div class="BlockElement"></div>
  <span>Text</span>
  <div class="BlockElement"></div>
</div>

Now if you run this, you will see some unidentified space on the edges, which happens to be the padding applied on the h1. (this was tested in chrome and Firefox, same result.)

Now since block level elements sits on their own line this should be understandable, However while being inside an inline element it still does the same thing since it comes after the padding it pushes it of the way which would seems logical.

---

Now we know when you float an element, to goes either left or right, then the rest of the content follows it (depends on the text-align property but the content doesn't ignore the floated element dimensions unlike absolute positioning ), lets try it with a normal example.

console.log(document.querySelector('.div').getBoundingClientRect().height);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.div {
  background-color: pink;
}

p {
  float: left;
  width: 100%;/* To be 100% width like your code */
  background-color: brown;
}

<div class="div">

  <p>I'm floated</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Straight forward, Why printing the height, keep reading below.

---

Now What if the containing block is an inline level element (like having a p inside a span which you don't often see, for obvious reasons)

console.log(document.querySelector('.div').getBoundingClientRect().height);
console.log(document.querySelector('.div>p').getBoundingClientRect().height);

console.log(document.querySelector('.div').getBoundingClientRect().height + document.querySelector('.div>p').getBoundingClientRect().height, '/ +1 which is the space inline elements keeps to care for decenders that block level element add to their height');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.div {
  display: inline;
  background-color: pink;
}

p {
  float: left;
  width: 100%;/* To be 100% width like your code */
  background-color: brown;
}

<div class="div">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

I guess this speaks for it self, The height here is shorter, the height gets larger in the other example only when we add width:100%, because we push the text downward therefore the height increases, The same doesn't happen in this example width:100% has no effect, so it is safe to say that the elements gets outside then the parent follows, could be a bug could be how it was intended to behave.

---

So now we know that a floated block level element gets outside it's parent then the parent follows, same result in chrome and Firefox.

If we add some sort of space that comes before the content like padding or a border

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.div {
  display: inline;
  background-color: pink;
  padding: 0 10px;
  border-left: 10px solid lime;
  border-right: 10px solid lime;
}

p {
  float: left;
  width: 100%;
  background-color: brown;
}

<div class="div">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

since the floated element takes 100% width, the parent will follow as we know, in chrome we would see what we expect, however Firefox seem to not care maybe ignore?, we see the padding/border being stuck to end of the floated element, then the content wraps around to the next line.

browsers where everything works out, seem to do extra work (The magic as we say), if you would treat the text as an inline level element that it's actually is float it to the left like it's sibling and move that padding to it.

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  display: unset;
}

h1>span {
  float: left;
  padding: 5px 12px;
  background-color: #00addc;
  margin-bottom: 2px;
}

h1::after {
  content: '';
  display: block;
  margin-bottom: 25px;
  height: 1px;
  float: left;
  width: 100%;
}

h1::before {
  content: '';
  display: block;
  height: 1px;
  float: left;
  width: 100%;
  background-color: #00addc;
  margin-bottom: 0px;
}

<h1><span>Text</span></h1>

Try to run this in Firefox and see the effect, what chrome/safari is doing to fix this internally, i don't really know i googled this but didn't find any article about it.

PS : You may wanna consider reading this, it speaks about having block level element inside inline level element.

Answer 2

I think it is a bug. Great find. The work-around is quite easy:

h1 {
  padding: 5px 12px;
  background-color: #00addc;
  display: inline-block;
  margin-top: 0!important;
  margin-bottom: 2px;
}
h1::before {
  content: '';
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #00addc;
  margin-top: -5px;
}

<h1>Advocacy documents</h1>