css - css list li 点一种颜色，文本另一种颜色（仅限 CSS）

Question

我有清单：

HTML：

<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

<ol>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ol>

CSS：

ul li {
    list-style-type: disc;
    margin-left: 2em;
    color: black;
}
ol li {
    list-style-type: decimal;
    margin-left: 2em;
    color: black;
}

示例： JsFiddle

问题：

如何将disc/decimalli 中的（点/数字）更改为红色，但text会有黑色？

不能修改html！

为了更好地想象我想要实现的目标：

谢谢您的回答。

Answer 1

::pseudoElement我用标签弄清楚了

解决方案：

ul li {
    list-style-type: disc;
    margin-left: 2em;
    color: red;
}
ol li {
    list-style-type: decimal;
    margin-left: 2em;
    color: red;
}
ol li:first-line, ul li:first-line  {
    color: black;
}

示例：JsFiddle

Answer 2

好的，这样的事情怎么样？它使用 before 伪元素并用 unicode 声明项目符号。

JSFiddle：http: //jsfiddle.net/T4NVj/11/

ul li {
    margin-left: 2em;
    color: black;
    list-style:none;
}


ul li:before { 
    content: '\2022';
    color: red;
    display: block;
    height: 5;
    width: 5;
    left: -0.7em;
    top: 1.2em;
    position: relative;
}

Answer 3

如果您无法修改 html，那么您唯一的选择是使用图像 -

ul li { 
    list-style-image: url(path_for_red_color_image.jpg);
}

Answer 4

自从 2013 年提出这个问题以来，CSS 已经发展了很多。在 CSS3 中进行这种更改变得微不足道。

body {
  /* Set "section" to 0 */
  counter-reset: section;
}
ul, ol {
list-style: none;
padding: 0;
}
ol li::before {
  counter-increment: section;
  content: counter(section)  ". ";
  color: red;
}
ul li::before {
    content: "•";
    color: red;
    font-weight: bold;
    display: inline-block;
    width: 1em;
}

你可以在这里看到一个例子： https ://codepen.io/BIGREDBOOTS/pen/mdPpXRe