Code snippet: Customising bullet points of unordered list items, without using images

I'm sure many people have wanted to be able to customise the bullet icons used in a standard unordered list — I know I have in the past, and had to once again recently, so I've found a solution.

The default solid bullet point can be changed to a number of things using the CSS property list-style-type, such a a circle or square. But with this, you are limited to a few options, and you can't really customise the list style much; for example, if you change the colour of your list item text (by styling the <li>), the bullets inherit this colour too.

My solution involves generating the bullet for each list item and use CSS's :before pseudo-class to prepend it to the list item:

		ul.bullets { 
			list-style-type: none;
			margin: 0 0 0 15px;
			padding: 0; 
		}
		
		ul.bullets li {
			/* Styles for the font, colour, margins, etc. of your list items */
		}
		
		ul.bullets li:before {
			content: '•';
			position: absolute;
			left: -15px;
		}

I have chosen to use a standard bullet point here, the • character (•), which currently won't look much different than the default list styles, but I will come to how we can customise it further later.

I first set our list to not use any list-style through the standard means of list-style-type, and reset the margins and padding of the unordered list. I'll discuss the 15px margin shortly. We can then style our actual list item contents however we want. Usually, the list style would inherit whatever we put here (line 8).

We then can customise our actual bullet points. The CSS property content generates the • and prepends it to the list item. You'll notice I used the actual bullet symbol rather than it's HTML entity. The content property doesn't seem to accept the HTML entities, so the actual symbol is required directly in the CSS code. We then position the bullet absolutely and position it to the left of the list item content by using a negative left value. We need to offset this value by giving our entire list a left margin of the same value (in this case 15px).

We can customise the bullets much more than this; we could change the colour, font size, position, and use a completely different character to the standard bullet, without affecting the styling of the actual list item content:

		ul.bullets li:before {
			content: '✓';
			position: absolute;
			left: -15px;
			color: #C00;
			font-size: 1.2em;
		}

Some other symbols that could be used are ⊕ (⊕), → (→), ♦ (♦) or ✓ (&#10003) — or anything you prefer.

Tweet