The ISA-Bus

One blog to bind them all.

Using characters as list markers in HTML

This isn’t supported officially. Going back to CSS1, images can be set as list markers, and all kinds of numbering styles can be chosen, but picking a character as marker of an unordered list isn’t part of the specs. Pity, there are nice characters in UTF for this purpose, like this one:

The workaround that I found is to set the list-style-type to “none”, and then prefix the character to the list items with the content property, like this:

ul {list-style-type: none;}
ul li:before {content: "☞";}

Unfortunately, there is no way to directly make it display like a list marker either. This can be done in a not very elegant way by setting a negative margin:

ul {list-style-type: none;}
ul li:before {content: "☞"; margin-left: -1.2em;}

I found that 1.2 em works near perfectly for this specific character. For other characters, you’ll have to experiment.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: