仅 li 子弹的颜色 [重复]答案

【问题标题】：Color of li bullet only [duplicate]仅 li 子弹的颜色 [重复]
【发布时间】：2014-01-15 08:18:31
【问题描述】：

我在 HTML 和 twitter 引导程序中的 <li> element 中遇到项目符号问题。我只想更改 li 子弹的颜色，而不是整个文本。我无法更改 html 代码以将文本放入 span 、 p 或其他内容中。

引导层：http://bootply.com/102688 （我试过：第一行伪类，但这仅适用于第一行，所以不好）

最好的问候并感谢您的帮助。

【问题讨论】：

你可以通过一些:before 的魔法轻松实现这一点，但如果有人有更好的想法，让我们拭目以待。
在这里试试：stackoverflow.com/questions/5306640/…
@tilda，正是我的想法（我不是 OP），标记为重复
@tilda 我试过了，广场很小，我不知道怎么做大

标签： html css

【解决方案1】：

另一种允许通过 CSS 形状制作 LI“点”的方法 - 您可以自定义形状、大小等。

例如下面的代码会显示大红圈：

li:before {
    content: "";
    position:relative;
    left: -10px;
    background-color:red;

    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%
}

演示：http://jsfiddle.net/LWHYJ/

【讨论】：

我喜欢这个，但它确实依赖于具有border-radius:caniuse.com/#feat=border-radius的现代浏览器
@Jasper 我们可以将在旧浏览器中显示为正方形的圆称为“优雅降级”:) 吗？
是的，我认为这是一个很好的选择。让我更喜欢这个答案:)
+1 酷！ @Jasper 如果浏览器不支持border-radius，那么项目符号将是一个正方形，我认为它不会太麻烦。
这是一个不错的技巧。如果您在某些 li 中有多行文本，则提供的 CSS 将不起作用。要解决这个问题，请相对定位 li，绝对定位子弹。相应地调整定位以满足您的需求。

【解决方案2】：

这可以在与建议的重复答案 (How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags) 不同的庄园中完成：

您可以将 <li /> 元素内的文本包装在 <span /> 标记中，然后为 <li /> 元素指定特定颜色，并为 <span /> 元素指定正确的文本颜色：

CSS：

li {
    color : red;
}

li span {
    color : black;
}

HTML：

<ul>
  <li><span>test</span></li>
</ul>

这是一个演示：http://jsfiddle.net/ytH5P/2754/

【讨论】：

+1，非常好。不依赖:before，这应该减少旧浏览器的问题。
@Sparky 使用:before 伪元素依赖于我相信的通用字符集，因此点符号可能会在不同的系统上混淆。
是的，我的评论同意这一点。不使用:before应该减少问题。
OP 一直在询问更大的子弹。 Jasper 的回答似乎很容易在这方面进行调整：jsfiddle.net/ytH5P/2755