Moin,
eine Alternative zu deiner befor- und after-Definition, die auf jeden Fall auch IE8-kompatibel sein sollte, ist folgendes:
Erstell dir einen Container, ein span z.B., den du mit CSS so bearbeitest, dass er nur noch eine senkrechte gepunktete Linie darstellt. Dann machst du dir einen zweiten Container, der eine halbe Linie darstellt. Und einen letzten, dritten, Container, der eine horizontale Linie darstellt. Ich nehme an, dass du deine Liste irgendwie serverseitig generierst. In diesem Fall kommst du eh rekursiv an alle Items ran und kannst dann, je nach Position in deiner Iteration eine Kombination dieser drei Container voranstellen.
So habe ich bereits auch eine komplette Baumstruktur hinbekommen und es war perfekt Abwärtskompatibel, weil nur CSS1-Code verwendet wird.
Wenn noch Fragen sind: Fragen :)