Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Pure CSS Tree View With Custom Tree Icons

FollowAndrew via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn how to create a pure CSS tree view structure with customizable icons in this 32-minute tutorial. Explore the use of pseudo elements for tier legs and arms, and discover the magic of details and summary tags. Master CSS techniques to implement a common web structure typically requiring JavaScript, all while picking up valuable tricks along the way. Follow along as the instructor guides you through setting up the HTML, styling with pseudo elements, and creating custom icons for collapsed and open states.

Syllabus

Intro
Setting up the HTML
The magic of details & summary
Adding the styles for the arms and legs with pseudo elements
Setting up custom icons for the collapsed and open states
Reminding you to SUBSCRIBE ALREADY

Taught by

FollowAndrew

Reviews

Start your review of Pure CSS Tree View With Custom Tree Icons

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.