li去掉前面小圆点css方法(附自定义无序列表样式)
闪灵科技（开发者团队）介绍：li去掉前面小圆点css方法就是给li加上list-style: none;样式即可。前段时间实现了个自定义无序列表样式，踩了一些坑，和大家说说。设计师说我们这个，列表项样式要优化一下，太丑了，这个原点要大一点，默认的无序列表样式是这样的。
我们先将 li 原有的圆点去掉，通过给 li 加上 list-style: none; 的方式。
然后用 ::before 给 li 前面创建一个伪元素，加上圆点字符。
这里我给 content 的值末尾加了两个空格符，来实现右边距效果。你也可以用 margin-right 来做，更正规一些。
注意点：这里 content 的值最好用转义字符，不要用原字符，因为我发现在某些浏览器会乱码。
圆点没和文字水平居中对齐，我们用 transform 微调一下位置。
需要注意的一点是，transform 对行内元素（display: inline）无效。而 ::before 伪元素默认为行内元素，需要手动改为 inline-block。
完整写法为：
ul{
width: 200px;
border: 1px solid #555;
font-size: 13px;
line-height: 20px;
color: #2362d6;
padding-inline-start: 40px;
}li {
position: relative;
list-style: none;
}li::before {
content: “\2022 “;
position: absolute;
left: -11px;
display: inline-block;
font-size: 22px;
}
更具体的写法这里就不展开讲了，读者可以自行阅读官方文档。但这种方案在修改圆点大小后，无法使用 transform 进行位置的调整，所以我没有用这个。
