怎么自定義列表符號(hào)？ – css筆記

ul，li的無(wú)序列表有默認(rèn)的符號(hào)·，但是在很多情況下我們希望可以給這個(gè)符號(hào)加入自己的樣式和顏色，甚至是換成自定義的符號(hào)。默認(rèn)的符號(hào)我們是無(wú)法做任何的樣式處理，而且默認(rèn)的符號(hào)在CSS屬性里面只有幾個(gè)選擇可以使用，很多情況下都是無(wú)法滿(mǎn)足我們的設(shè)計(jì)。

其實(shí)自定義無(wú)序列表符號(hào)不難，我們只需要使用偽元素::before加content屬性就可以實(shí)現(xiàn)。

• 原文來(lái)源：詳情
• 了解更多：詳情

在我這個(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)使用樣式取代它。