我可以为css中的<li>点制作这些圈子吗？

Question

我正在尝试制作此菜单

现在到目前为止我可以到达this point我>出现在每个<li>之前，文本前的边距为10px，但问题是我无法获得圈子

我尝试添加<divs>以为我可以给它一个background-color和border-radius，但问题是html出现为文本，所以我无法应用任何css to it。

最简单的解决方案是在每个<div>中添加<li>但是该列表由php函数生成，该函数将HTML作为单个字符串返回。我可以使用str_replace()找到每个开头<li>并添加<div>或在javascript中执行相同的操作但我想知道我是否可以通过CSS执行此操作

Answer 1

CSS

ul{
    list-style-type:none;
}
li::before {
    content: ">";
    background: gold;
    font-family: serif;
    font-style:bold;
    display:inline-block;
    font-weight: 800;
    padding: 1px 3px;
    line-height: .8em;
    text-align:center;
    vertical-align: center;
    margin:0px 10px 0px 0px;
    border-radius: 50%;
    color: #fff;
}

修改：已更新，以使其看起来更好。

Answer 2

尝试使用内容为li:before的{​​{1}}制作这些要点，如下所示：

>

这是JsFiddle。

Answer 3

如何在照片编辑软件中制作这些圈子并将其用作列表的marker，如下所示： -

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

或者，如果您不想使用图片： -

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

Answer 4

使用图片：list-style-image: url(...);

Answer 5

使用伪元素作为＆＃39; li :: before＆＃39;仅使用CSS动态调整指针。