Bluehost: Web hosting from $3.95/month. Sign Up

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

Posted on by Clive Walker in CSS

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:

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker