Deko-Linien - CSS statt HTML

[Thomas Luethi]

Hallo zusammen,

Danke für die Korrektur, dass H2 kein DIV enthalten darf.
(Wie konnte ich das vergessen?! ;-)

Stattdessen könnte man halt SPAN mit display:block nehmen,
falls die innere Box gewisse Eigenschaften braucht, die nur
ein Block-Level-Element haben kann.

Es ist mir klar, dass dieses innere, zusätzliche HTML-Element
eigentlich unschön ist, und ich danke Gunnar für den kreativen
Ansatz ohne zusätzliches HTML-Element, dafür mit CSS-"Tabelle",
bei der links und rechts vom Text mit :before und :after
eine "Zelle" eingefügt wird. Da diese (wegen der Angabe 50%)
maximal breit werden, wird der Text zusammengestaucht, und es
kommt zu (unerwünschten) Zeilenumbrüchen, siehe Beispiel 4
im aktualisierten Online-Beispiel
Das kann man mit einem zusätzlichen white-space:nowrap vermeiden,
siehe Beispiel 5.

h2

{ display: table-row; text-align: center; }

h2::before, h2::after
{
  background: white url(linie-horizontal.gif) repeat;
  content: "\A0"; display: table-cell; width: 50%;
}

  

> Abstand zwischen Text und Linie wäre auch möglich: Die Linie hinreichend breit machen (auf die Dateigröße wirkt sich das so gut wie gar nicht aus) und den Abstand rechts und links von der Linie in die Grafik mit einbauen.  
> `h2::before { background-position: right } `{:.language-css}  
  
Auch das ist natürlich eine sehr elegante Idee!  
  
Ich habe alles in meinem [Online-Beispiel](http://www.tiptom.ch/tests/fremdes/linie-text-linie.html) umgesetzt.  
Neu habe ich auch noch Screenshots angefügt.  
  
Ergänzen möchte ich noch, dass meine "Lösungen" mit  
den meisten Browsern "funktionieren", u.a. mit Firefox 3.0,  
MS IE 6.0, 7.0 und 8.0, Opera 10.0 und Safari 4.0.  
  
Der Ansatz von Gunnar (CSS-"Tabelle") funktioniert nur  
in MS IE 8.0, Firefox 3.5, Opera 10.0.  
Aber nicht in Firefox 3.0, MS IE <= 7.0, Safari 4.0.  
  
Auch der Ansatz von kunert (HR - Text - HR mit float:right)  
funktioniert übrigens in MS IE <= 7.0 nicht wie gewünscht.  
  
mfg Thomas