小编典典

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

all

想象一个包含一些<li>项目的简单未排序列表。现在，我已经将子弹定义为方形，list- style:square;但是，如果我将<li>项目的颜色设置为，color: #F00;那么 一切都会 变成红色！

虽然我只想设置方形项目符号的颜色。有没有一种 优雅的方式 来定义 CSS 中子弹的颜色…

…不使用任何精灵图像或跨度标签！

HTML

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

CSS

li{
   list-style:square;
}

阅读 113

2022-03-10

共1个答案

小编典典

最常见的方法是这样的：

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/

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

2022-03-10