仅 li 子弹的颜色 [重复]

Posted 2023-02-23

【中文标题】仅 li 子弹的颜色 [重复]

【英文标题】：Color of li bullet only [duplicate]

【发布时间】：2014-01-15 08:18:31

【问题描述】：

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

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

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

【问题讨论】：

你可以通过一些:before 的魔法轻松实现这一点，但如果有人有更好的想法，让我们拭目以待。

在这里试试：***.com/questions/5306640/…

@tilda，正是我的想法（我不是 OP），标记为重复

@tilda 我试过了，广场很小，我不知道怎么做大

【参考方案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