CSS 列表模型之marker标记

::marker是一个标记伪元素，能够定义内容填充在list-item上代表列表项的标志，先附上一个例子，就能很清楚地看出它的作用。

• zhaodao88.com 找商机
• zhaodao88.com 找人脉
• zhaodao88.com 找采购

1 2 3 4 5 6 7 8 9 10 效果图：

在这里，marker为元素定义的是每一项列表项前面的标记符，在伪元素内的content的内容就是要在列表项前面所填充的内容。

使用::marker填充标记内容
需要注意的是，普通元素要想使用marker，必须将元素定义成display: list-item，list-items在创建的时候会自动生成marker和counter。

标记的样式可以使用list-style-type和 list-style-image属性或者直接使用::marker伪元素进行样式编写。下面展示一个例子。

用::marker伪元素对标记进行控制，伪元素内content的内容就是标记符的内容

zhaodao88.com 找商机

zhaodao88.com 找采购

zhaodao88.com 找人脉

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 效果如图:

当然也可以为标记设置字体样式、颜色等属性，类似上面效果li::marker { color: blue; font-weight:bold; }

值得注意的是：目前只有以下属性能够作用于marker伪元素上

所有的字体样式：font相关
white-space属性
color属性
text-combine-upright, unicode-bidi, direction属性
content属性
所有的animation和