<h1> gestallten

[Mattes]

Du kannst dafür eine Hintergrundgrafik verwenden, 1 Pixel breit, in der Höhe des Strichs (nicht der Überschrift). Platziere die Grafik vertikal-mittig im <h1> und wiederhole sie horizontal (repeat-x).
Dem Text selbst gibst du einen einfarbigen Hintergrund, damit er den Hintergrundstrich überdeckt. Das funktioniert aber natürlich nur, wenn der Rest der Seite in diesem Bereich ebenfalls diesen einfarbigen Hintergrund hat.

Das heißt ich lege ein <div> an, diesem Div gebe ich erstmal eine Breite von 100% und eine Höhe von z.B. 2em.

Nein, das <div> brauchst du nicht, du hast schon das <h1>:

<h1><span>Überschrift</span></h1>

Dem <h1> verpasst du den Hintergrund, horizontal wiederholend mit repeat-x und vertikal mittig platziert mit background-position.
Das <span> bekommt einen einfarbigen Hintergrund, um die Hintergrundgrafik zu überdecken.

Matthias hat auf eine andere Variante hingewiesen (bei ihm leider erst nach einem Dutzend Beiträgen aufzuspüren), die nur mit dem <h1> auskommt, gänzlich ohne <span>:

h1 {  
	text-align: center;  
	display: table; /* <h1> bzw. dessen Inhalt als Tabelle darstellen */  
	border-collapse: collapse;  
}  
  
h1::before, h1::after { /* Elemente für Linie vor und hinter dem Titeltext erzeugen */  
	content: "";  
	display: table-cell; /* als Tabellenzelle behandeln */  
	width: 50%;  
  
	background-position: 0px 50%; /* Hintergrund vertikal zentriert */  
	background-repeat: repeat-x;  /* horizontal wiederholen */  
	background-image: url(…);     /* Grafik für den Hintergrund, siehe auch unten */  
}  
  
h1::before { /* Abstand zwischen Linie und Titeltext, jeweils vorne und … */  
	border-right: solid 2em transparent;  
}  
  
h1::after { /* … hinten */  
	border-left: solid 2em transparent;  
}  

Der Trick ist, mit ::before und ::after vorne und hinten an das <h1> zwei Elemente anzukleben, die die Striche enthalten. Damit die das Ganze dann auch in einer Reihe erscheint, wird der Darstellungsmodus des <h1> in eine Tabelle geändert.

Das ist zugegebenermaßen sehr geschickt, aber diese gedachte Tabelle bereitet mir irgendwie Unwohlsein – Geschmackssache.

Ohne Zweifel schön hingegen, dass die Grafik für die Linie auch eingespart wurde, ersetzt durch eine browsergenerierte:

{  
background-image: linear-gradient(  
	to right,  
	transparent 50%, black 50%  
);  
background-size: 4px 1px;  
}

Das lässt sich natürlich auch mit der <span>-Lösung einsetzen.