You could use :before and content: but this works only in the latest browsers, so if you're ok with that then this is your best solution. See the QuirksMode CSS compatibility table.
A slightly nastier solution that should work in all browsers is to use an image for the list style and just make the image look like a dash. See the W3C list-style-image page for examples
I do not know if there is a better way, but you can create a custom bullet point graphic depicting a dash, and then let the browser know you want to use it in your list with the list-style-type property. An example on that page shows how to use a graphic as a bullet.
I have never tried to use :before in the way you have, although it may work. The downside is that it will not be supported by some older browsers. My gut reaction is that this is still important enough to take into consideration. In the future, this may not be as important.
EDIT: I have done a little testing with the OP's approach. In IE8, I couldn't get the technique to work, so it definitely is not yet cross-browser. Moreover, in Firefox and Chrome, setting list-style-type to none in conjunction appears to be ignored.