我可以为我的<；李>；css中的点？

我正在做这个菜单

现在到目前为止，我可以看到

出现在每个

前面，文本前面有10px的边距，但问题是我无法得到圆圈

我尝试添加这样的想法：我可以只给它一个

背景色

和

边框半径

，但问题是html显示为文本，因此我无法对其应用任何css

---

最简单的解决方案是在每个

中添加一个

，但是该列表是由php函数生成的，该函数将HTML作为单个字符串返回。我可以使用

str_replace（）

来定位每个开口

，并添加一个
，或者在javascript中做同样的事情，但我想知道，通过CSS使用图像，我是否可以做到这一点：
列表样式图像：url（…）
使用图像：
列表样式图像：url（…）
使用伪元素作为'li:：before'仅使用CSS动态调整指针。
使用伪元素作为'li:：before'仅使用CSS动态调整指针。
如何在照片编辑软件中创建这些圆圈，并将其用作列表的
标记-

li{
list-style-image : url("circles.gif");
}

或者，如果您只是不想使用图像：-

li::before{
content : ">";
background : yellow;
border-radius : 50%;
/* and some other styles as per your wish */
}

在照片编辑软件中创建这些圆圈，并将其用作列表的
标记，如下所示：-

li{
list-style-image : url("circles.gif");
}

或者，如果您只是不想使用图像：-

li::before{
content : ">";
background : yellow;
border-radius : 50%;
/* and some other styles as per your wish */
}

CSS

编辑：更新以使其看起来更好。
CSS

编辑：更新以使其看起来更好。
尝试使用内容为
的
li:before
来突出这些要点，如下所示：

li:before {
    align-items: center;
    background-color: #fcbe35;
    border-radius: 50%;
    color: white;
    content: '>';
    display: inline-flex;
    font-weight: bold;
    height: 24px;
    justify-content: center;
    margin-right: 10px;
    width: 24px;
}

这里有一个。
尝试使用
li:before
和
的内容来表达这些要点，如下所示：

li:before {
    align-items: center;
    background-color: #fcbe35;
    border-radius: 50%;
    color: white;
    content: '>';
    display: inline-flex;
    font-weight: bold;
    height: 24px;
    justify-content: center;
    margin-right: 10px;
    width: 24px;
}

这是一张支票。
谢谢。我从来没有想过以前的
甚至
：：就像一个
谢谢。我从来没有想过以前的
甚至
：：就像一个
谢谢。我从来没有想过以前的
甚至
：：就像一个
谢谢。我从来没有想过以前的
甚至
：：就像一个
谢谢。我从来没有想过把
或者之前的
：：想象成一个
。我也不知道
列表样式图像
，我只是想把它擦掉时使用
列表样式：none
，谢谢。我从来没有想过把
或者之前的
：：想象成一个
。我也不知道
列表样式图像
，我只想在清除它时使用
列表样式：none