Baumstruktur

[Forumsgast]

Ich habe folgenden Code erstellt, um Daten in einer Baumstruktur anzuzeigen :

HTML:

<div>

<details>
<summary class="main">Elektro</summary>
<ul>
<li>
<details>
<summary>Dekorative Beleuchtung</summary>
<ul>
<li>Klassische & moderne Lampen</li>
<li>Lampenschirme und -Füße</li>
<li>Wand- und Deckenleuchten</li>
<li>Einbau-Lampen</li>
<li>Steh- & Tischlampen</li>
<li>Spots</li>
</ul>
</details>
</li>

</ul>

<ul>
<li>
<details>
<summary>Kleine Haushaltsgeräte</summary>
<ul>
<li>Staubsauger & Handstaubsauger</li>
<li>Küchen- & Personenwaagen</li>
<li>Kaffeemaschinen & -Vollautomaten</li>
<li>Bügeleisen & Stationen</li>
<li>Pfannen, Kessel, Dampfgarer & Kessel, Schnellkochtöpfe</li>
<li>Mikrowellen</li>
<li>Zapfanlagen</li>
<li>Grills & Barbecues</li>
<li>Brotbackautomaten</li>
</ul>
</details>
</li>
</ul>

<ul>
<li>
<details>
<summary>Unterhaltungselektronik</summary>
<ul>
<li>
<details>
<summary>Fernseher</summary>
<ul>
<li>LED</li>
<li>OLED</li>
<li>ULED</li>
<li>QLED</li>
</ul>
</details>
</li>
<li>Radios</li>
<li>MP3</li>
<li>Navis</li>
<li>Video & DVD Player</li>
<li>Receiver</li>
</ul>
</details>
</li>

</ul>

</details>

</div>

CSS:


* {
box-sizing: border-box;
margin: 0;
}

div {
margin-left: 20px;
}

.main {
font-size: 1.1em;
color: blue;
}
summary {
display: inline-block;
font-weight: bold;
}

details:hover {
cursor: pointer;
}

ul li {
list-style-type: none;
margin-left: -1.25em;
}

ul li:not(:has(summary)) {
list-style-type: "-";
}

ul summary::before {
position: absolute;
left: -0.55em;
top: 0.20em;
width: 1em;
height: 1em;
text-align: center;
content: "+";
background: orange;
}

ul details[open] > summary::before {
content: "−";
}

ul {
position: relative;
border-left: 2px solid orange;
}

details[open] > summary {
font-style: italic;
text-decoration: underline;
}

Das funktioniert auch wie gewünscht.

Ein letzter Schritt (nur der Optik wegen) ist der orangen Linie einer jeweils aufgeklappten Kategorie mit einem "_" abzuschliessen.

details[open] summary::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
border: 1px solid orange;
width: 5px;
}

Hiermit werden jedoch nur die äußeren anstelle der inneren orangen Linien erfasst.

Jemand ne Idee wie meine Selektoren abändern muss, damit die jeweils inneren orangen Linien einer Kategorie abgeschlossen werden ?

[Forumsgast]

Wenn ich dem jeweils letzten li Element eines details summary eine Klasse "last"
verpasse, kann ich mit dem before Pseudo Selektor mein gewünschtes Ergebnis erreichen :

<li class="last">Spots</li>
<li class="last">Brotbackautomaten</li>
<li class="last">QLED</li>
<li class="last">Receiver</li>

.last::before {
position: absolute;
content: "";
bottom: 0px;
left: 0;
border: 1px solid orange;
width: 5px;
}

Somit meine abgeänderte Frage :
Wie kann ich dieses letzte li Element mit purem CSS selektieren, ohne im html eine Klasse "last" zu vergeben ?

Folgender Versuch scheitert :

details summary +ul li:last-child {
... hier mein Code mit li:: before
}

[Forumsgast]

habs selbst rausgefunden :

ul:last-child li:last-child::before{
position: absolute;
content: "";
bottom: 0px;
left: 0;
border: 1px solid orange;
width: 5px;
}

Kann geschlossen werden