Minimal pure CSS Treeview with FontAwesome expanders


Update 2015-07-18: shux! not valid to apply ::before/after psuedo elements to <input> since it’s not technically content (stack-o reference)


jQuery solution:



Following solution works in Chrome and Safari but not Firefox or IE… so i guess that means i like webkit.


Look ma, no JavaScript! 🙂

Leveraging (hidden) checkbox element to maintain expand/collapse state and

:before {content: "xyz" }

 css to avoid extra elements.

Not an original idea but wanted to see of i could trim down all the extra html markup & css required.

The <input> is the only additional overhead above standard markup.

Leave a Reply