Probleme mit Positionierung von Pseudo-Element

[Rolf B]

Hallo heinetz,

Wenn Du die Flexbox bzw. das Grid nur zum Zentrieren nutzt, dann kannst Du das Problem vielleicht so umgehen:

<h2 class="center">Eine Überschrift für die Welt</h2>
<p>Lorem ipsum dolor sit irgendwas.</p>

/* h2 Element färben um zu zeigen wo das eigentliche Element sitzt */
h2 {  background-color: #ccf; }

h2:before {
  content: "";
  display: block; width: 5em; height: 0.2em;
  border-top: 5px solid red;
}

/* Zentrieren mit width: max-content und margin:auto */
h2.center {
    margin: auto; width: max-content;
}
/* :before Teil ebenfalls innerhalb des h2 zentrieren */
h2.center:before {
  margin:auto;
}

Siehe auch hier: https://jsfiddle.net/cv00ma28/ ?

Wenn Du die Flexbox oder das Grid aus anderen Gründen brauchst, dann guck mal, wie Du Selektoren basierend auf dem Container bauen kannst, um meine .center Klasse anders zu realisieren.

Rolf