Da musst du selber schauen mit welchen Browsern deine User deine Seite besuchen und anhand dessen deine Entscheidung treffen. Dank des Autoupdates bei Windows sollte aber die Unterstützung für Flex doch bei >90% vorhanden sein. Aber wirklich sagen kann dir das nur die Besucherstatistik deiner Seite.

Nur als Ergänzung:
Ohne Pseudo-Elementen, aber mit einem span um den Text der Überschrift.
Geht aber nicht, wenn Bilder oder Verläufe als Seitenhintergrund benutzt werden

.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Ebenfalls eine simple wie geniale Lösung. Danke!

Das ist die selbe Lösung wie schon vorher angesprochen wurde, nur eben mit zusätzlichen Elementen anstatt Pseudo-Elementen und daher auch nicht zu empfehlen.

edit: Doch nicht die selbe Lösung, meine Lösung geht hier gar nicht ohne zusätzliches Element. Sorry!

Ich weiß nicht wie Du darauf kommst.
Sicher gibt es in der Grundidee eine gewisse Ähnlichkeit. Aber bei so einem kleinen Beispiel ist es auch kein Wunder.

Wenn überhaupt, dann denke ich, ähneln sich die Beispiele von MrMurphy und mir. Zumindest in einem Punkt – sie funktionieren.

Dein Beispiel, selbst wenn es funktioniert, ist in der Praxis nicht zu verwenden. Der Grund wurde Dir von ChOpSueY! schon genannt.

O.k., man kann in der Eile so was wie
content: "";
vergessen. Oder
top: 50%;
Aber funktionieren würde es auch dann immer noch nicht. Oder nur zufällig – wenn die Überschrift der einzige Inhaltselement auf der Seite ist und body und html keine extra Formatierung haben (height).
Denn die absolute Positionierung braucht „Containing Block“. Und in Deinem Beispiel ist das das root-Element. Richtig wäre es, wenn die Überschrift ein "position: relative;" hätte.

Außerdem: „display: block;“ ist überflüssig, wenn die Pseudo-Elemente absolut positioniert sind.

Aber wie gesagt, Du weiß in der Regel nicht, wie breit der Text ist. Und mit Breiten in % kannst Du die Pseudo-Elementen (und somit die Border) nicht genau um den Text positionieren.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Hast du überhaupt alle Antworten gelesen? Bzw. wieso diese doch aggressive Antwort?

Was soll heißen, wenn mein Beispiel funktioniert? Es funktioniert, bzw. habe ich die Lösung nur in Textform präsentiert und habe gehofft, dass das ausreicht um die Lösung zu finden. Dass ich dann nicht sofort alle Fehler gesehen habe möge man mir verzeihen, ich habe trotzdem geholfen wo ich konnte.

Und ja, bei variablen Breiten ist MrMurphys Ansatz zu empfehlen, an diese Lösung habe ich selbst noch nicht gedacht, deshalb danke auch von mir dafür. ich hatte bis jetzt das Glück genau diese Problemstellung nur bei Seiten mit 1 oder 2 Überschriften zu haben, da konnte ich mit %-Werten arbeiten. Eventuell stelle ich das auch mal auf flexbox um

Bei was weißt du nicht, wie ich darauf komme?
"Eine andere Variante, welche aber nur bei einfärbigen Hintergründen funktioniert ist folgende: Du machst nur ein Pseudoelement mit 100% Breite und gibst der Überschrift eine Hintergrundfarbe (und legst sie natürlich über den "Strich"). " <- Das habe ich letzte Seite geschrieben, das ist zugegeben auch nur ausformuliert ohne HTML/CSS, aber es beschreibt genau deine Lösung. Mit dem Unterschied, dass man kein zusätzliches HTML-Element benötigt. Und HTML-Elemente nur für Styling einzufügen sollte auch vermieden werden. Deshalb ist deine Lösung nicht falsch (was ich ja auch nie behauptet habe) sondern einfach nur nicht zu empfehlen, da mit pseudo-Elementen gearbeitet werden kann.

Meine Antwort ist keineswegs aggressiv – sorry, wenn Du sie so empfunden hast.
Mich würde Deine Lösung sehr interessieren.
Könntest Du vielleicht ein Beispiel posten?
Vielleicht auch Eins für Deine erste Lösung?

.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Gerne doch. Lösung 1 vervollständie ich mal, hier aber das schon angesprochene Problem bei mehreren Überschriften:
Bezüglich Teil 2 muss ich dir wohl doch Recht geben, ich bekomme das ohne zusätzliches Element nicht hin. Dabei war ich mir so sicher ^^ Ja das kommt davon wenn man nicht alles selber vorher ausprobiert. Also verzeih bitte, deine Version kann man leider nicht ohne zusätzliche Elemente realisieren. Weil man ja die Hintergrundfarbe nicht nur für den Text sondern nur für das gesamte Element anweden. Werde die Antwort oben auch ausbessern, sorry

Danke.
Es bräuchte noch
h1 { text-align: center; }
und wie schon gesagt, ist display: block für die Pseudo-Elemente überflüssig.
Ich dachte, wenn Du es selber testest, verstehst Du, wie ich das meine. Mit der Praxisuntauglichkeit.
Aber o.k. - erledigt.
Ich weiß – auch ohne Test.
Aber ich wollte, dass Du selber darauf kommst. Bist Du ja.
Ich doch kein Ding – alles ok. Es ist ein Forum – wir diskutieren ja bloß. Eine Entschuldigung bedarf es nicht. Finde ich es aber trotzdem nett von Dir. Zeugt auch von Größe.

__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Das center ist ein Copy-Paste Opfer, hab mich da noch im jsfiddle gespielt und probiert und dann wohl nicht alles kopiert Genau wie das unnötige display:block, das hab ich nur von der ersten Seite kopiert.
Und was meinst du jetzt mit der Praxisuntauglichkeit genau, da habe ich jetzt immer noch nicht genau verstanden was du konkret damit meinst?

niemand ist unfehlbar, ich schon gar nicht. Jeder lernt hoffentlich gerne dazu (und manche, so wie ich, müssen eben selber auf ihre Fehler draufkommen )