Css :: before ошибка в Firefox

Думаю, это ошибка. Отличная находка. Решение довольно просто:

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>

Извините, если объяснения отрывистые и повсюду. по этому поводу нужна отдельная статья.

Я думаю, что нашел проблему или почему это происходит. Это больше о том, что происходит, а не ответ на вопрос.

Либо это ошибка Firefox, либо Firefox не всем управляет за вас.

У вас есть такая структура:

<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)

Что вы скажете, мы пытаемся это воспроизвести?

.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>

Теперь, если вы запустите это, вы увидите некоторое неопознанное пространство по краям, которое является заполнением, примененным к h1. (это было протестировано в Chrome и Firefox, результат тот же.)

Теперь, поскольку элементы уровня блока находятся на своей собственной строке, это должно быть понятно, однако, находясь внутри встроенного элемента, он по-прежнему делает то же самое, поскольку он идет после заполнения, он отталкивает его, что кажется логичным.

Теперь мы знаем, когда вы перемещаете элемент влево или вправо, а затем остальной контент следует за ним (зависит от свойства text-align, но контент не игнорирует размеры плавающего элемента, в отличие от абсолютного позиционирования), давайте попробуем это с нормальным примером.

console.info(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>

Сразу, зачем печатать высоту, продолжайте читать ниже.

Что делать, если содержащий блок является элементом встроенного уровня (например, наличие p внутри диапазона, которое вы не часто видите по очевидным причинам)

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

console.info(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>

Я думаю, это говорит само за себя. Высота здесь короче, высота увеличивается в другом примере только тогда, когда мы добавляем width:100%, потому что мы толкаем текст вниз, поэтому высота увеличивается. В этом примере этого не происходит. width:100% имеет нет эффекта, поэтому можно с уверенностью сказать, что элементы выходят наружу, а затем следует родительский элемент, может быть ошибка, может быть то, как он должен был себя вести.

Итак, теперь мы знаем, что элемент уровня плавающего блока выходит за пределы своего родителя, затем следует родительский элемент, тот же результат в Chrome и Firefox.

Если мы добавим какое-то пространство перед содержимым, например отступы или границу

* {
  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>

поскольку плавающий элемент имеет ширину 100%, родитель будет следовать, как мы знаем, в chrome мы увидим то, что ожидаем, однако Firefox, похоже, не заботится, возможно, игнорирует ?, мы видим, что отступ / граница застревает в конце плавающего элемента , затем содержимое переходит к следующей строке.

браузеры, в которых все работает, похоже, выполняют дополнительную работу (магия, как мы говорим), если вы относитесь к тексту как к встроенному элементу уровня, который на самом деле перемещает его влево, как его родного брата, и переместите к нему этот отступ.

*,
*: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>

Попробуйте запустить это в Firefox и посмотрите, что делает chrome / safari, чтобы исправить это изнутри, я действительно не знаю, я искал это в Google, но не нашел никакой статьи об этом.

PS: Вы можете рассмотреть возможность чтения это, в нем говорится о наличии элемента уровня блока внутри элемента встроенного уровня.