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

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.