Hyphen Bullet

Hyphen Bullet Hyphen Bullet jquery workshop

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 markup. I thought this was excessive effort so went about doing this with jQuery and basic HTML.

jQuery Hyphen Bullet CSS Replacement

First off you need jQuery and I’ve explained how to add this to your site a number of times in my blog – click here for a recap (bottom of page).

The we simply need to enlist jQuery’s awesomeness on our list with the following code:-

$('.div_class_ul li').prepend("<span>-&nbsp;</span>");

and then adding a bit of basic CSS to the list item li so that we are not using any standardised CSS bullets: –

.div_class_ul {
	margin: 0px;
	padding: 0px;
.div_class_ul li {
	list-style-type: none;

What we are simply doing is programatically adding a new ‘span’ to each list element (li) and putting a hyphen and non-breaking space within it. jQuery prepend copies this accross each list with the dicv class that you have given it (“.div_class_ul” can be anything, 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
About the Author
Hyphen Bullet Hyphen Bullet 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.