Unicode character as bullet for list-item in CSS

Question

Hi,

I need to use, for example, star-symbol(★) as a bullet.

I have read the CSS3 module: Lists, that describes, how to use custom text as bullet, but it's not working for me. I think, the browsers simple does't support ::marker pseudo-element

How to do it, without using images ?

Answer 1

Using Unicode characters for bullets will require that the user has the applicable fonts and character sets downloaded and the experience might differ.

If the standard options for list-style-type isn't sufficient http://www.w3schools.com/css/pr_list-style-type.asp

You can also try an image using either list-style-image: url(imagename);

or

background-image: url(someimagename)

Answer 2

you don't unfortunately - you might be able to use :before but I am pretty sure browser support for this is iffy.

Answer 3

I'd probably go for an image background, they're much more efficient and cross-browser-friendly.

Here's an example:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>