Use &middot; instead of bullet for <ul>

Question

I found an article on the list-style-type property in CSS, but it doesn't list the &middot; (·) as an option, as opposed to the default disc or &bullet; (&bullet;). Is there a way to do this with HTML or CSS?

Answer 1

CSS (works in any browser supporting :before and content: ):

li:before {      content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */ } li {     list-style:none;     text-indent:-.5em; /* helps make it look more like it's a bullet. */ } 

Caution: It is not a real list style. Therefore, when you have wrapped lists, it will look funny. This can perhaps be mitigated by a negative text-indent of a few units to get it to function more like a list-style.

---

Another implementation:

li:before {     content: '\b7\a0';     position:absolute;     right:100% } li {     list-style:none;     position:relative; } 

This version seems to work better. I often use :before and :after to add extra things like borders, but if you are adding a bullet I imagine that that is not the case. Even though this is the alternate suggestion, it is probably the preferred one.

Answer 2

Yes! You can use the before pseudo-class to insert the character before each item.

.DotList li:before {     content: "·"; } 

Here is an example jsFiddle.