如何在不使用任何图像或跨度标签的情况下通过 CSS 在 ULLI html 列表中设置项目符号 colored颜色

发布于03月15日

假设有一个简单的未排序列表，其中包含大约<li>个项目.现在，我已经通过 list-style:square;定义了项目符号是方形的，但是，如果我将<li>个项目的 colored颜色设置为color: #F00;，那么everything就会变成红色！

而我只想设置正方形子弹的 colored颜色 .CSS中有没有elegant way来定义项目符号的 colored颜色？

...without using any sprite images nor span tags!

HTML个

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

CSS个

li{
   list-style:square;
}

推荐答案

要做到这一点，最常见的方法是这样做:

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/

适用于所有浏览器，包括IE 8及以上版本.