Dein css Code zeigt den bereits von dir abgewandelten Code.
Versuche folgendes:
CSS
#folderTree {
& li {
& .icon::before {
content: '' !important;
box-sizing: border-box important;
background-color: color-mix(in srgb, currentColor 10%, transparent)!important;
border: 1px solid color-mix(in srgb, currentColor 20%, transparent)!important;
border-radius: 4px!important;
width: 4px!important;
height: 12px!important;
margin: auto 3px!important;
position: absolute!important;
inset-block: 0!important;
inset-inline-start: 2px!important;
margin-left: -8px !important;
}
}
}
#folderTree {
& li.selected {
& .icon::before {
content: '' !important;
box-sizing: border-box important;
background-color: green!important;
border: 1px solid color-mix(in srgb, currentColor 20%, transparent)!important;
border-radius: 4px!important;
width: 4px!important;
height: 12px!important;
margin: auto 3px!important;
position: absolute!important;
inset-block: 0!important;
inset-inline-start: 2px!important;
margin-left: -8px !important;
}
}
}
Alles anzeigen
Das Entscheidende ist das margin-left, sonst überlagert der ::before Code das Icon. Bei border und background-color mit den Farben experimentieren.
Zu color-mix siehe z.B. hier.