Reading List: CSS Lists, Markers, and Counters
/ 2 min read
I’m working on the Tech book club landing page challenge on Frontend Mentor and needed to refresh my memory about styling lists with CSS. This was my reading list:
- Learn CSS: Lists on web.dev: A good refresher on the basics of list styling
- CSS Lists, Markers, And Counters by Rachel Andrew for Smashing Magazine: Detailed explanations of markers and counters as more advanced list features
- Creative list styling by Michelle Barker for web.dev: A collection of different ways to style lists
My goal was to get ideas how I could style the lists on the landing page.
The page has four unordered lists with a checkmark SVG icon as list markers. The icon is part of the image assets in the starter files. Similar to the unordered lists on the recipe page, the markers are centered vertically if the list item wraps over two or more lines.
There is also an ordered list on the landing page. Its counters are positioned above the list items and have a border.
These are all cases for the ::before pseudo-element with custom markers using the content property. For the ordered list, I can use counter(list-item) for the generated content to add numerical markers.
The ::marker pseudo-element has only limited options for styling and cannot be positioned using flexbox or grid.
Coming Soon: I plan to write a post on how I styled the lists in my Frontend Mentor - Tech book club landing page solution when I have completed the challenge.