html lists with specific characters?

Question

Is there a way to style a unordered list using the greater than symbol or any symbol I choose?
> one
> two
> three

♦ one
♦ two
♦ three

without the use of url()?
Thanks

Answer 1

Use li:before

<style>
ul {    list-style: none;   }
li:before { content: '> '}
</style>
<ul>
<li>xyz</li>
</ul>

Answer 2

I up-modded the existing answer, which is how you do it entirely BTB. To get it working in IE 6-7, you need to rasterize your desired item marker and do something like the following instead:

li {
  list-style-type: none;
  margin-left: 0;
  padding-left: $length;
  background-image: url($image);
  background-repeat: no-repeat;
}

...where $length is the aggregate width of your bitmapped list item marker and the desired negative space between the list item and the background image. In its turn, $image is the valid URI of the rasterized marker. A background-position value might also be desirable.

There is also list-style-image (which does the work of all the properties used above), but it carries one very big caveat: the negative space you want around the image needs to be supplied in the image, a requirement which carries its share of pitfalls.

Finally there's no reason why you can't use the background shorthand property, but I avoid that - and its companion font - because values assigned to those shorthand properties are sometimes parsed in unexpected ways unless all values are present.