wrote up my `tree`-styled table of contents css here
edit: better approach in comments - I used characters whereas @Lady uses all CSS boxes
@inherentlee i wouldn¦t use box drawing characters for this; css is already very good at drawing boxes
in this case you need to draw two boxes, one shaped like an L which is half the height of a line, and one shaped like an I which extends for the entire list item (unless it is the last list item)
so
li{ Position: Relative; Padding-Inline-Start: 1EM }
li::before,li::after{ Display: Block; Box-Sizing: Border-Box; Inset-Block: 0 Auto; Inset-Inline: 0 Auto; Inline-Size: .75EM /* or whatever */; Border-Inline-Start: 1PX Solid }
li::before{ Block-Size: .5LH; Border-Block-End: 1PX Solid; Content: "" }
li:Not(:Last-Child)::after{ Block-Size: 100%; Content: "" }
[note: above code is untested, i just threw it together to demonstrate the idea, it may not entirely work]
@Lady oh lemme fiddle with this, it's kinda unreadable on fedi lol so i'll stick it in the editor and play around
@Lady it's super not working so far and i've already made a few adjustments. it's also significantly harder to understand imo. is there a reason why this would be better than the characters method other than "css can already draw boxes"?
@inherentlee why not use characters? because it depends on font support and users have a wide variety of fonts available on their computer. users might have font size or letter spacing variation as well, for accessibility or personal aesthetic reasons. you have hardcoded a border size of .095rem and a offset of -.34rem but these values only work on your machine. they do not necessarily work on other peoples. here is what your table of contents looks like on my computer
@inherentlee i forgot a position: absolute on the ::before and ::after is the issue
@Lady I will try that.
@inherentlee here is what i am getting
if it is confusing to you how this works, i recommend getting out a piece of paper and trying to render it by hand so that you understand what the computer is doing
@Lady With a few other adjustments to accommodate for my site's styling it is finally working.
I'll take down the existing post as it is no longer relevant.
It's not that I couldn't see how it works but rather that it is at-a-glance far more opaque to my eyes. But I see the reasoning to use it!
@Lady (by "existing post" I mean blog post, not erasing the conversation here)
@inherentlee or you could update it :) it is not a bad thing to learn in public
@Lady I don't feel comfortable trying to teach someone else's material.
@Lady even with credit, it would feel a bit awkward to me
@inherentlee (a different approach to this which would be closer to your initial attempt, and so maybe more “obvious”, would be to use an SVG instead of a unicode character. that would not have the font problems i mentioned and should work in any environment. i just find SVGs to be kind of a pain to deal with personally, so usually resort to CSS hacks instead, even though they are a little wonkier)
@Lady SVGs are def a pain
@Lady that's good to know, thank you. I think this could be fixed with calc potentially. I would still be interested in a working non-character version.