Changing the colour of bullet points using CSS

Sometimes you want to use a different colour for the bullet points, to the text next to it. There are different ways of changing the colour of bullet points in an unordered list, such as using a background image as a bullet point or using the following alternative method.

Prevent the default bullet points from appearing.

ul li {
	list-style: none;
}

Use the before tag to add a bullet point using the “content” field, specify its colour and reposition it relative to its current position.

ul li:before {
	content: '\2022';
	display: block;
	position: relative;
	max-width: 0px;
	max-height: 0px;
	left: -20px;
	top: -5px;
	color: red;
	font-size: 20px;
}

‘\2022’ refers to the hex value of a bullet special character.

To get the desired effect you want, you may need to reposition the bullet and of course change the colour.