如何使用 CSS 自定義無序列表樣式

語言: CN / TW / HK

theme: v-green

大家好,我是前端西瓜哥。

前段時間實現了個自定義無序列表樣式,踩了一些坑,和大家說說。

設計師說我們這個,列表項樣式要優化一下,太醜了,這個原點要大一點

預設的無序列表樣式是這樣的。

```html

      
  • 我是第一行。
  •   
  • 你是第二行你是第二行你是第二行你是第二行你是第二行
  •   

```

圖片

雖然覺得有點花裡胡哨,但我還是去研究了,看看怎麼給圓點變大一點。

::before

我們先將 li 原有的圓點去掉,通過給 li 加上 list-style: none; 的方式。

然後用 ::before 給 li 前面建立一個偽元素,加上圓點字元。

css ul {   /* ... */   /* 稍微調整一下 ul 的左邊距 */   padding-inline-start: 20px; } li {   list-style: none; } li::before {   /* 這裡加兩個空白符作為邊距 */   /* 你也可以用 margin-right */   content: "\2022  ";   font-size: 22px; }

這裡我給 content 的值末尾加了兩個空格符,來實現右邊距效果。你也可以用 margin-right 來做,更正規一些。

注意點:這裡 content 的值最好用轉義字元,不要用原字元,因為我發現在某些瀏覽器會亂碼

圖片

圓點沒和文字水平居中對齊,我們用 transform 微調一下位置。

需要注意的一點是,transform 對行內元素(display: inline)無效。而 ::before 偽元素預設為行內元素,需要手動改為 inline-block。

完整寫法為:

css ul {   width: 200px;   border: 1px solid #555;   font-size: 13px;   line-height: 20px;   color: #2362d6;   padding-inline-start: 20px; } li {   list-style: none; } li::before {   content: "\2022  ";   display: inline-block;   font-size: 22px;   transform: translateY(3px); }

圖片

設計師很滿意地離開了。

但過了幾天,他發現有些不對勁,又跑過來和我說:不對,這個換行的文字起始位置不應該在圓點下邊,而是應該和第一行文字左側對齊,也就是應該像下面這樣。

圖片

::before + 絕對定位

問題不大,馬上改。

將 ::before 偽元素設定為絕對定位,讓圓點脫離正常文件流。這次我們用 left 來調整位置。

完整的寫法為:

css ul {   width: 200px;   border: 1px solid #555;   font-size: 13px;   line-height: 20px;   color: #2362d6;   padding-inline-start: 40px; } li {   position: relative;   list-style: none; } li::before {   content: "\2022  ";   position: absolute;   left: -11px;   display: inline-block;   font-size: 22px; }

效果很完美,設計師很滿意地離開了。

圖片

list-style-type 和 ::marker

如果你不需要修改圓點大小,而是想替換為其他符號,還用一種寫法是使用 list-style-type 或 ::marker。

list-style-type 用在 ul 元素上。

css ul {   width: 200px;   border: 1px solid #555;   font-size: 13px;   line-height: 20px;   color: #2362d6;   padding-inline-start: 20px;   list-style-type: "\2708"; /* 飛機符號 */ }

然後我們看到原點變成了飛機字元:

圖片

::marker 則是用在 li 元素上,可以讓不同的 li 使用不用樣式。

css li::marker {   content: "\2708"; }

更具體的寫法這裡就不展開講了,讀者可以自行閱讀官方文件。

但這種方案在修改圓點大小後,無法使用 transform 進行位置的調整,所以我沒有用這個。

結尾

小小的無序列表自定義樣式也挺多門道的,希望對你有所幫助。

我是前端西瓜哥,分享前端知識,歡迎關注我。

首發於我的公眾號:前端西瓜哥