css - 如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制](How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate])

Question

This question already has an answer here:

(这个问题在这里已有答案：)

• Change bullets color of an HTML list without using span 12 answers

  (更改HTML列表的项目符号颜色，而不使用跨度 12答案)

Imagine a simple unsorted list with some <li> items.

(想象一下带有一些<li>项的简单未排序列表。)

Now, I have defined the bullets to be square shaped via list-style:square;

(现在，我已经通过list-style:square;定义子弹为方形list-style:square;)

However, if I set the color of the <li> items with color: #F00;

(但是，如果我用颜色设置<li>项目的color: #F00;)

then everything becomes red!

(一切都变红了！)

While I only want to set the color of the square bullets.

(虽然我只想设置方形子弹的颜色。)

Is there an elegant way to define the color of the bullets in CSS...

(是否有一种优雅的方式来定义CSS中子弹的颜色......)

...without using any sprite images nor span tags! (...不使用任何精灵图像也不使用span标签！)

HTML

(HTML)

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

(CSS)

li{
   list-style:square;
}

  ask by Sam translate from so

Answer 1

The most common way to do this is something along these lines:

(最常见的方法是这样做：)

 ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: "? "; color: red; /* or whatever color you prefer */ } 

 <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> 

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

(JSFiddle： http ： //jsfiddle.net/leaverou/ytH5P/)

Will work in all browsers, including IE from version 8 and up.

(将适用于所有浏览器，包括版本8及更高版本的IE。)