Neno: :before/after Inhalt wiederholen

Ich habe eine Navigationsleiste die ich mit einer horizontalen Liste realisiert habe. Jeder <li>-Eintrag enthält einen Link auf weissem Hintergrund. Nun soll jedes <li> links und rechts (mit :before und :after) eine Grafik bekommen, die vertikal wiederholt wird.

Geht das bei diesen Pseudo-Eigenschaften überhaupt, sowie bei "background-repeat: repeat-y"?

  1. Ich habe eine Navigationsleiste die ich mit einer horizontalen Liste realisiert habe. Jeder <li>-Eintrag enthält einen Link auf weissem Hintergrund. Nun soll jedes <li> links und rechts (mit :before und :after) eine Grafik bekommen, die vertikal wiederholt wird.

    Geht das bei diesen Pseudo-Eigenschaften überhaupt, sowie bei "background-repeat: repeat-y"?

    Es sind Pseudo-Elemente und diese Elemente verhalten sich wie "echte" Elemente im DOM - du musst ihnen nur ein Hintergrundbild zuweisen und nicht einfach nur ein Bild.

    Alternativ kannst du aber auch meherere Hintergrundbilder verwenden. Beide Lösung sind aber unpraktisch, da du damit Kategorisch selbst recht aktuelle Browser ausschließt.

    Ich würde tendentiell ein Hintergrundbild auf das li-Element und eines auf das a-Element geben. Dann brauchst du weder irgendwelche Pseudoelemente noch irgendwelche Weichen, Hacks oder Workarounds für weniger moderne Browser.

  2. @@Neno:

    nuqneH

    Geht das bei diesen Pseudo-Eigenschaften überhaupt, sowie bei "background-repeat: repeat-y"?

    Ja. Du kannst für die Pseudoelemente Breite und Höhe angeben und sie absolut im Elterncontainer positionieren.

    Aber wozu Pseudoelemente? Bis Browser mehrere Hintergrundbilder für ein Element unterstützen [CSS3-BACKGROUND §3.1] kannst du linkes/rechtes Hintergrundbild auf die 'li'- und 'a'-Elemente verteilen.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)