Zusammenfassung verschiedener Methoden zur Implementierung von Artikeltrennlinienstilen mit CSS

<div class="line_01">Einzelne Beschriftungsimplementierung einer kleinen Trennlinie</div>

.demo_line_01{  
    Polsterung: 0 20px 0;  
    Rand: 20px 0;  
    Zeilenhöhe: 1px;  
    Rahmen links: 190px durchgezogen #ddd;  
    Rahmen rechts: 190px durchgezogen #ddd;  
    Textausrichtung: zentriert;  
}

<div class="line_02"><span>Kleine Trennlinie geschickt mit Farbe umgesetzt</span></div>

.demo_line_02{  
    Höhe: 1px;  
    Rahmen oben: 1px durchgezogen #ddd;  
    Textausrichtung: zentriert;  
}  
.demo_line_02 span{  
    Position: relativ;  
    oben: -8px;  
    Hintergrund: #fff;  
    Polsterung: 0 20px;  
}

<div class="line_03"><b></b><span>Implementierung einer kleinen Trennlinie im Inline-Block</span><b></b></div>

.demo_line_03{  
    Breite: 600px;  
}  
.demo_line_03 b{  
    Hintergrund: #ddd;  
    Rand oben: 4px;  
    Anzeige: Inline-Block;  
    Breite: 180px;  
    Höhe: 1px;  
    _Überlauf:versteckt;  
    vertikale Ausrichtung: Mitte;  
}  
.demo_line_03 span{  
    Anzeige: Inline-Block;  
    Breite: 220px;  
    vertikale Ausrichtung: Mitte;  
}

<div class="line_04"><b></b><span>Die kleine Trennlinie schwebt, um zu erreichen</span><b></b></div>

.demo_line_04{  
    Breite: 600px;  
}  
.demo_line_04{  
    Überlauf: versteckt;  
    _zoom: 1;  
}  
.demo_line_04 b{  
    Hintergrund: #ddd;  
    Rand oben: 8px;  
    schweben: links;  
    Breite: 26%;  
    Höhe: 1px;  
    _Überlauf:versteckt;  
}

<div class="line_05">———————————<span>Kleines Trennzeichen zum Erreichen</span>————————————</div>

.demo_line_05{  
    Buchstabenabstand: -1px;  
    Farbe: #ddd;  
}  
.demo_line_05 span{  
    Buchstabenabstand: 0;  
    Farbe: #222;  
    Rand: 0 20px;  
}