CSS, um horizontale Linien auf beiden Seiten des mittleren Textes zu erreichen

<div Klasse="Header">
    <span class="line"></span>
    <span class="text">Text in der Mitte, horizontale Linien auf beiden Seiten</span>
    <span class="line"></span>
</div>

<Stil>
.header
{
    Breite: 400px;
    Höhe: 36px;
    Zeilenhöhe: 36px;
    Rand: 1px, durchgehend grün;
    Textausrichtung: zentriert;
}
.Linie
{
    Anzeige: Inline-Block;
    Breite: 100px;
    Rahmen oben: 1px durchgezogen #cccccc;
    vertikale Ausrichtung: 5px;  
  // Ich habe online gesehen, dass .text auf vertical-align:-5px eingestellt ist. Ich habe es ausprobiert und es scheint mit der für .header eingestellten Zeilenhöhe in Konflikt zu geraten, daher ist der Effekt nicht ganz richtig. Stellen Sie also die vertikale Ausrichtung auf .line ein}
</Stil> 

<div Klasse="Header">
    <div>Text in der Mitte, horizontale Linien auf beiden Seiten</div>
</div>

<Stil>
    .header
    {
        Breite: 400px;
        Höhe: 36px;
        Zeilenhöhe: 36px;
        Textausrichtung: zentriert;
        Rand: 1px, durchgehend grün;
        Position: relativ;
    }
    .header div:vorher, .header div:nachher
    {
        Position: absolut;
        Hintergrund:#ccc;
        Inhalt:"";
        Höhe: 1px;
        oben: 50 %;
        Breite: 100px;
    }
    .header div:vor{links:10px;}
    .header div:nach{rechts:10px;}
</Stil>