ul，li的無序列表有默認的符號·，但是在很多情況下我們希望可以給這個符號加入自己的樣式和顏色，甚至是換成自定義的符號。默認的符號我們是無法做任何的樣式處理，而且默認的符號在CSS屬性里面只有幾個選擇可以使用，很多情況下都是無法滿足我們的設(shè)計。
其實自定義無序列表符號不難，我們只需要使用偽元素::before加content屬性就可以實現(xiàn)。
在我這個例子里面我做了兩個任務(wù)列表，一個是待處理任務(wù)，一個是已完成任務(wù)，各自給了不一樣的列表符號和顏色。
實現(xiàn)原理
一、首先我們禁用了ul的默認符號樣式list-style: none
二、在li的:before偽元素上給予content內(nèi)容值，待處理任務(wù)使用，已完成任務(wù)li.completed:before使用?
三、為了展示效果更加好看我分別給了li和li .completed兩個不同的顏色
上代碼看看是怎么實現(xiàn)的吧：
HTML
<div>
<h2>待處理</h2>
<ul>
<li>待辦任務(wù)1</li>
<li>待辦任務(wù)2</li>
<li>待辦任務(wù)3</li>
<li>待辦任務(wù)4</li>
<li>待辦任務(wù)5</li>
</ul>
</div>
<div>
<h2>已完成</h2>
<ul>
<li class="completed">完成任務(wù)1</li>
<li class="completed">完成任務(wù)2</li>
<li class="completed">完成任務(wù)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屬性可以用來做很多特殊的效果，也是當(dāng)代前端排版比較常用的“魔法”。說到偽元素的使用，我再給大家說一個比較常用的使用場景。
在管理后臺或者是文章展示中，我們經(jīng)常可以見到的“面包屑導(dǎo)航”也是用偽元素來插入每個目錄中間的符號的。
實現(xiàn)邏輯
一、這個導(dǎo)航含有3個a標簽，首先給每個a標簽加入一個偽元素::after，然后在content屬性插入/符號。
二、然后使用a:first-child，這個偽類會選擇到第一個a標簽，然后使用content屬性加入?符號。
三、因為我們第一步在每個a標簽的后面插入了/符號, 所以我們需要在最后一個a標簽清除掉。這里我們使用:last-child選擇到最后一個a標簽，然后用content: " "屬性把偽元素的內(nèi)容清楚掉。
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: "";
}
知識總結(jié)
- ::before | ::after?— 偽元素用于向某些選擇器添加特殊的效果。
- content?— CSS 屬性用于在元素的 ::before 和 ::after 偽元素中插入內(nèi)容。使用content 屬性插入的內(nèi)容都是匿名的可替換元素。
- :first-child?— CSS偽類表示在一組兄弟元素中的第一個元素。
- :last-child?— CSS偽類代表父元素的最后一個子元素。
當(dāng)然，li元素自帶了一些可自定義的符號，可通過<ol type="a">的例子進行調(diào)用，當(dāng)然，不贊成使用。請使用樣式取代它。
