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">的例子进行调用，当然，不赞成使用。请使用样式取代它。
