Whats the best way to use a special character as a bullet for lists in CSS.

I'm trying to use "»"?

Recommended Answers

All 7 Replies

li{
    content: "\00BB \0020";
}

Won't work in IE though. If you want it to be cross-browser use an image instead.

thanks. i tried doing that to an inline "li" didn't seem to work.

Hmm, how would it work in inline tags?

I have this:

<li style="content: '\00BB \0020';">

it doesn't seem to work.

an earlier post mentions that for IE to use an image...what would the syntax be for that?

Two methods I can think of.
You have the image property for Lists, and you have the background-image proprerty also.

li
{
list-style-image: url(yourimage.ext);
}

Or

li
{
list-style: none;
background-image : url(yourimage.ext);
}

Note, with the background-image method, you may need to apply a bit of padding to the list.

Hmm, how would it work in inline tags?

I have this:

<li style="content: '\00BB \0020';">

it doesn't seem to work.

Hi vexhawk, try this:

ul li:before { content: "\00BB \0020"; }

It works for me

The pseudo selector can't support in IE 6 and older. Using the background image must be more flexible and comfortable. I never used the pseudo selector for styling the elements.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.