Question

I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:

list-style-image

And then giving it a URL.

However, in my case, I just want to use the ‘+’ symbol. I don’t want to have to create a graphic for that and then point to it. I’d rather just instruct the unordered list to use a plus symbol as the bullet symbol.

Can this be done or am I forced to make it a graphic first?

Answer 1

The following is quoted from Taming Lists:

There may be times when you have a list, but you don’t want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Either the padding or the margin needs to be set to zero, with the other one set to 1em. Depending on the “bullet” that you choose, you may need to modify this value. The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.

The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. In our case we’ll be using », the right double angle quote: ».

» Item 1
» Item 2
» Item 3
» Item 4
» Item 5 we’ll make
   a bit longer so that
   it will wrap