ul 前面的小圆点太难看？快来看看如何美化吧。这里通过简单的小案例，演示如何通过CSS修改颜色、形状、大小。一分钟掌握如何美化ul样式。

如何更改li标签前的黑色圆点的形状、颜色和大小？

默认样式

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>

一、更改前面的黑色点的颜色

通过添加样式，如下：

ul li::marker{
  color: red;
}

二、使用 font-size 属性更改小圆点的大小

ul li::marker{
  color: red;
  font-size: 30px;
}

效果如下：

三、修改小圆点的样式

ul li::marker{
  font-size: 30px;
  content: "😍";
}

四、修改小圆点的位置

案例一、小圆点在box内部还是外部

原本的位置

修改后的位置

{
  list-style-position: inside;
  list-style-type: disc;
  line-height: 1.5rem;
}

案例二、在标签li后面加入“@”符号，这里都会使用position，这样可以调整位置。

.centerbt li:after{
  content:"@";  
  color:gray;
  position:relative;
  left:200px;
  bottom:20px;
}

附录

css中用list-style-type指定列表（lists）前面符号,如下：

disc : 　CSS1　实心圆

circle : 　CSS1　空心圆

square : 　CSS1　实心方块

decimal : 　CSS1　阿拉伯数字

lower-roman : 　CSS1　小写罗马数字

upper-roman : 　CSS1　大写罗马数字

lower-alpha : 　CSS1　小写英文字母

upper-alpha : 　CSS1　大写英文字母

none : 　CSS1　不使用项目符号

armenian : 　CSS2　传统的亚美尼亚数字

cjk-ideographic : 　CSS2　浅白的表意数字

georgian : 　CSS2　传统的乔治数字

lower-greek : 　CSS2　基本的希腊小写字母

hebrew : 　CSS2　传统的希伯莱数字

hiragana : 　CSS2　日文平假名字符

hiragana-iroha : 　CSS2　日文平假名序号

katakana : 　CSS2　日文片假名字符

katakana-iroha : 　CSS2　日文片假名序号

lower-latin : 　CSS2　小写拉丁字母

upper-latin : 　CSS2　大写拉丁字母