使用·代替子弹<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; (•). 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.

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.

Answer 4

You can use an background-image in LI

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

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;
}

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>