ztf.net.cn
七牛云
您当前的位置: 首页 >  个人博客

列表ul li前面的点如何更改颜色、形状、大小

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 大写拉丁字母


ZTF

ZTF|时间:2022-10-09

如果缘分安排我们相遇,请不要让她擦肩而过。扫一扫二维码,加我为好友吧!
标签云