The CSS List Specification
Currently you are limited in how you can customise a list. You only have 3 properties which are:
- list-style-type: Defines the marker from a predefined list
- list-style-image: Use an image as the marker
- list-style-position: Where the markers are placed, inside or outside
As you try work with these properties, you'll quickly hit a road block. You might find yourself asking these questions:
- How can I make the bullet a different colour to the content?
- How can I make the sizing different to the content?
- How can I customise the positioning of the marker?
How about ::marker?
The ::marker pseudo-element is a step in the right direction. But it only supports some CSS properties and is currently in a working draft specification meaning it only supports some of the latest browser versions.
However, if you're not too picky about the design and don't care too much about older browsers, this may just be enough for you to use.
There are some good examples of how to use ::marker on CSS tricks.
The answer, ::before
The ::before element inserts something inside the element you're targeting before the content. This is essentially the same thing a default list does. The cool things about ::before is you can use any CSS property you want and supports all browsers.
We are essentially going to create our own version of ::marker which allows us to:
- Avoid adding extra HTML
- Customise, customise, customise
- Treat the marker as it's own element
Styling the list using ::before
Step 1: Create the HTML markup
Right now I feel like eating ice cream, so I'm going to create a list of my favourite ice creams.
Step 2: Reset the list styling
Remove any default styling and set the list style to none. If you're using a CSS framework, go through the documentation and find the relevant utility class.
Step 3: Update li style to accommodate marker
Since I plan to make the markers absolute, we need to set the position relative to the list item. Also add a bit of padding so there's space between the content and marker. Add a little bit of margin so we have enough space between each list item. We'll use em units to ensure responsiveness if font sizes change between devices.
Step 4: Make the marker
Since the list is about my favourite ice creams, let's set the marker to something ice cream related. In this case, I'm going to use a background image to show the marker.
Step 5: The finished list
You should now have something like this. Don't worry if it doesn't look exactly like this I've also added the Bootstrap CDN so the text looks a little better.
Extra notes
While my example is with a background image, you can do things like:
- Create your own bullet points
- Use emojis via the content attribute
- If you're loading a font library as a font file, apply the relevant classes to the ::before element.
Thanks for getting this far. Let me know if this has helped you in the comments.