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.