Deko-Linien - CSS statt HTML

[Gunnar Bittersmann]

@@Thomas Luethi:

nuqneH

Wenn die Box mit dem Text immer nur so breit sein soll, wie nötig, wäre auch folgendes möglich:

HTML:
<h2 class="bsp3"><span>Test 3</span></h2>

Unschön daran: Das zusätzliche 'span'-Element im Markup.

Schöner wäre, es ginge ohne, also für <h2>Test</h2>.

Und es geht (fähige Browser vorausgesetzt):

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 }  
/* h2::after { background-position: left } muss nicht angegeben werden, da default */

Qapla'