CODEWITHSUNDEEP
htmlcsshtml-lists
chromedude
chromedude

Reputation: 4302

How do you set <ul> bullet's list-style to a code decimal?

I have a ul that I want to set the bullet style of with the code decimal of &#10003 (checkmark). Is there any way to do this? I tried list-style-image, but it didn't work.

Upvotes: 3

Views: 2590

Answers (4)

Winfield Trail
Winfield Trail

Reputation: 5695

Closest you can likely get is something hacky like:

ul {
  list-style-type: none;
  padding: 0;
}

ul li:before {
content: "\2713";
}

Upvotes: 0

Albireo
Albireo

Reputation: 11095

You can specify the type through list-style-type (however you're limited to the pre-set values, otherwise if you want to use list-style-image you must supply an image, not a character.

Otherwise, use the :before selector as others have suggested.

Upvotes: 0

Boldewyn
Boldewyn

Reputation: 82734

You will need to apply a workaround here:

ul { list-style: none; }
ul li:before { content: "\2713"; }

Then adapt padding and margin of ul, li and li:before to your liking. This won't work in IE < 8, though. There you will have to use images or JavaScript (or putting it in the markup, if you really need to support them).

Upvotes: 7

Dave Kiss
Dave Kiss

Reputation: 10485

list-style-type is what you are looking for.

Upvotes: -2

Related Questions