Recently I was working on a client site and needed a '- Hyphen Bullet' like so:-

- List Item

Surprisingly there is no cross-browser and backwards computability CSS attribute for a list that gives you a 'hyphen' other than using a bullet image of a hyphen in your CSS mark-up. I thought this was excessive effort so went about doing this with jQuery and basic HTML.

jQuery Hyphen Bullet CSS Replacement

Load up jQuery and then add the following jQuery and CSS: -

What we are simply doing is programmatically adding a new 'span' to each list element (li) and putting a hyphen and non-breaking space within it. jQuery prepend copies this across each list with the div class that you have given it (".hyphen-list" can be a class name of your choosing, or even just "ul" if you don't intend to use multiple list styling). Here is the result:-

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4