ul，li的无序列表有默认的符号·，但是在很多情况下我们希望可以给这个符号加入自己的样式和颜色，甚至是换成自定义的符号。默认的符号我们是无法做任何的样式处理，而且默认的符号在 CSS 属性里面只有几个选择可以使用，很多情况下都是无法满足我们的设计。
其实自定义无序列表符号不难，我们只需要使用伪元素::before加content属性就可以实现。
在我这个例子里面我做了两个任务列表，一个是待处理任务，一个是已完成任务，各自给了不一样的列表符号和颜色。
实现原理
一、首先我们禁用了ul的默认符号样式list-style: none
二、在li的:before伪元素上给予content内容值，待处理任务使用，已完成任务li.completed:before使用✔
三、为了展示效果更加好看我分别给了li和li .completed两个不同的颜色
上代码看看是怎么实现的吧：
HTML
<div> <h2>待处理</h2> <ul> <li>待办任务1</li> <li>待办任务2</li> <li>待办任务3</li> <li>待办任务4</li> <li>待办任务5</li> </ul></div><div> <h2>已完成</h2> <ul> <li class="completed">完成任务1</li> <li class="completed">完成任务2</li> <li class="completed">完成任务3</li> </ul></div>CSS
ul { list-style: none; color: #fff; font-size: 20px; border: 3px solid #000; padding: 1rem 2rem; min-height: 200px; margin: 15px 2rem 0 0; background: #323232; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); border-radius: 8px;}
li { padding: 0.3rem 0;}
li::before { content: " "; color: aqua;}
li.completed::before { content: "✔ "; text-decoration: none; color: greenyellow;}
li.completed { text-decoration: line-through; color: #bdbdbd;}::before和::after伪元素加content属性可以用来做很多特殊的效果，也是当代前端排版比较常用的“魔法”。说到伪元素的使用，我再给大家说一个比较常用的使用场景。
在管理后台或者是文章展示中，我们经常可以见到的“面包屑导航”也是用伪元素来插入每个目录中间的符号的。
实现逻辑
一、这个导航含有 3 个a标签，首先给每个a标签加入一个伪元素::after，然后在content属性插入/符号。
二、然后使用a:first-child，这个伪类会选择到第一个a标签，然后使用content属性加入»符号。
三、因为我们第一步在每个a标签的后面插入了/符号, 所以我们需要在最后一个a标签清除掉。这里我们使用:last-child选择到最后一个a标签，然后用content: " "属性把伪元素的内容清楚掉。
HTML
<div class="breadcrumb"> <a>三钻</a> <a>前端</a> <a>教程</a></div>CSS
.breadcrumb { font-size: 1.6rem; color: #fff;}.breadcrumb a:first-child { color: #82fcfd;}.breadcrumb a:first-child::before { content: " » ";}.breadcrumb a::after { content: " /"; color: #ef6eae;}.breadcrumb a:last-child::after { content: "";}知识总结
- ::before | ::after — 伪元素用于向某些选择器添加特殊的效果。
- content — CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素。
- :first-child — CSS 伪类表示在一组兄弟元素中的第一个元素。
- :last-child — CSS 伪类代表父元素的最后一个子元素。
当然，li 元素自带了一些可自定义的符号，可通过<ol type="a">的例子进行调用，当然，不赞成使用。请使用样式取代它。