Use · instead of bullet for <ul>

Question

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

Wafd

obligatory w3fools reference – Intro

doesn't mean they aren't useful for references – Wafd

@stevo225, I used to like w3schools once upon a time, but then i discovered that reading the specifications was actually very easy and that w3schools is wrong too often for me to ever trust it. If I can't trust it as a source, it ceases to be useful in any meaningful way. – Intro

But why use the fools when the real W3 references are so much better? – Leslie

I understand completely, but with anything on the internet, I feel I must test it myself anyway, I am distrustful from the start. And since they do have a large set of references, I don't mind starting there. – Wafd

@steveo225, the specification is the document that defines how the language must work. For particular browser implementations you can use quirksmode's compatibility tables as an accurate reference. – Intro

Also, you can ban sites from your search results, as I have done to w3schools. I have found the quality of my results has drastically improved and I can find accurate information much faster. – Intro

For all the whiners against w3fools - novices don't read the specs because they are daunting and too comprehensive for most daily needs. Instead, point them to user-friendly docs such as MDN or MSDN, or even... I was going to recommend Apple Dev Club, but stick to the former two. Also QuirksMode. – Mccain

I hate w3schools, but I hate w3fools even more. Why not provide a specific article (perhaps on MDN) that does a better job, rather than pointing to that useless webpage over and over? – Supremacy

On the topic: The interpunkt (aka ”middot”) is typographically used to separate words. I haven't heard about any language where the interpunct is actually used in lists or similar. That explains why it's not a standard option. – Springfield

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.

Coxcombry

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.

Tower

Answer 3

list-style-type doesn't select what character to use, it selects an abstract marker to use. Note the standard states:

The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems.

Glyphs are specified with disc, circle, and square. Their exact rendering depends on the user agent.

For more control over the marker, you must either set an image using list-style-image or use the :before pseudo element and content property, setting the list-style-type to 'none'. :before and the content property aren't supported in IE 7 and earlier, so you must either use list-style-image to support IE 7 or simply let IE 7 use a different marker. You can use conditional comments to target IE 7 and earlier.

Millwright

Answer 4

You can use an background-image in LI

One possible example
http://css.maxdesign.com.au/listamatic/vertical05.htm

Cutaway

Answer 5

There are a limited number of available options for list-style-type which are defined in the CSS2 spec.

You can use:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none

If you'd like something custom, use the list-style-image property

If you're styling for browsers that support generated content, you can use:

li:before {
  content: '\[utf-8 hex code for character]';
  position: absolute;
  right: 100%;
}

li {
  position: relative;
}

Intro

Note that this will lead to strange behaviour if your list text is pushed out of position by a floating element. The bullets will not be shifted even though the text will, and the result will probably be undesirable. – Mayflower

Answer 6

Instead of li:before, which affects all li's (in menu, tabs, accordion) on page, I have used this:

ul {
	list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC');
}

  
<ul>
  <li>This is my middot</li>
</ul>

Banerjee