HTML list-style-type dash

Is there a way to create a list-style in HTML with a dash (i.e. - or – – or — —) i.e.

<ul>
  <li>abc</li>
</ul>

Outputting:

- abc

It's occurred to me to do this with something like li:before { content: "-" };, though I don't know the cons of that option (and would be much obliged for feedback).

More generically, I wouldn't mind knowing how to use generic characters for list items.

There is an easy fix (text-indent) to keep the indented list effect with the :before pseudo class.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

You could use :before and content: bearing in mind that this is not supported in IE 7 or below. If you're OK with that then this is your best solution. See the Can I Use or QuirksMode CSS compatibility tables for full details.

A slightly nastier solution that should work in older browsers is to use an image for the bullet point and just make the image look like a dash. See the W3C list-style-image page for examples.