Does your site run on Perch CMS? Hire me to help. Perch CMS Development

List item bullet points with the ::before pseudo-element

Posted on by Clive Walker in CSS

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

I was checking out the Guardian's website recently (in Chrome DevTools, as you do) and spotted how they use the ::before pseudo-element to create list item bullet points. For example, at the bottom of this article in the 'Please support...' call-to-action section.

Perhaps this is 'old hat' to you but I've not seen bullet points generated like this before. It seems like a great method because it means you can create bullet points (with different styles) that are scalable and should look great on any device (retina screens, for example). I used to create background images to do this but that's not as good as the ::before pseudo-element method imho.

Here's how it is done:

See the Pen Bullet Points with the ::before pseudo-element by Clive Walker (@clivewalker) on CodePen.

Improving it

One ‘problem’ with the Guardian’s method is list items where text wraps on more than one line. The second and subsequent lines will be aligned underneath the bullet point (i.e left aligned with the list item). You might want each line to be aligned underneath the previous line. In my Codepen code, I’ve shown how this is achievable using the text-indent property (with a negative value in ems equal to the width of the ::before pseudo-element) on the li tag.

This is just a quick post/demo. I need to test it some more but I’m planning to implement this on the site soon.

Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Comments are OFF for this post.

© 2024 Clive Walker