html修改无序列表序号颜色,更改无序列表列表的项标记的颜色和大小的解决办法...

提示:如果仅更改列表项的颜色,设置li的颜色就可以,以下可以忽略。

本文的解决办法是利用伪元素选择器,在元素的内容的最前面添加文字来模拟默认浏览器样式达到效果的。

效果图:

代码:

Document

ul {

width: 200px;

margin: 0 auto;

padding: 0;

list-style: none;

}

/*正方形*/

ul li::before {

content: "■";

color: #F00;

}

/*实心圆*/

ul li::before {

content: "●";

color: #0F0;

position: relative;

top: -1px;

margin-right: 7px;

}

/*空心圆*/

ul li::before {

content: "○";

color: #00F;

}

• 1
• 2
• 3

原文：https://www.cnblogs.com/fantianlong/p/11336555.html