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