CSS custom bullets

You know how making a list using ul and li gives you a dotted/bulleted list, right? Like this:

• List Item 1
• List Iyem 2

Well, ever wanted custom bullets for certain list, but couldn't go and hardcode them because the content is to be dynamic? Here's a nifty trick for you.
For this example, we'll replace the dots by ">".

In your css, select your li and set the list-style to none, like so:

ul li{ list-style: none; }

Then, select the same li, apply the :before selector to it, and set the content to the character, in their escaped hexadecimal
values.

ul li:before{ content: "\003E \0020"; }

003E is the hexadecimal value for the ">" character, and 0020 is the one for a space. Hexadecimal values can be found here.

And now for the final result, check this out!

• List item 1.
• List item 2.

You may want to move them a bit to the left, so that the added characters appear in the exact same position as the bullets did, but that isn't too hard.