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

前段時間實現(xiàn)了個自定義無序列表樣式，踩了一些坑，和大家說說。

設(shè)計師說我們這個，列表項樣式要優(yōu)化一下，太丑了，這個原點要大一點。

默認的無序列表樣式是這樣的。

<style>
  ul {
    width: 200px;
    border: 1px solid #555;
    font-size: 13px;
    line-height: 20px;
    color: #2362d6;
  }
</style>
<ul>
  <li>我是第一行。</li>
  <li>你是第二行你是第二行你是第二行你是第二行你是第二行</li>
  <li>三</li>
</ul>

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

::before

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

然后用 ::before 給 li 前面創(chuàng)建一個偽元素，加上圓點字符。

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

這里我給 content 的值末尾加了兩個空格符，來實現(xiàn)右邊距效果。你也可以用 margin-right 來做，更正規(guī)一些。

注意點：這里 content 的值最好用轉(zhuǎn)義字符，不要用原字符，因為我發(fā)現(xiàn)在某些瀏覽器會亂碼。

圓點沒和文字水平居中對齊，我們用 transform 微調(diào)一下位置。

需要注意的一點是，transform 對行內(nèi)元素(display: inline)無效。而 ::before 偽元素默認為行內(nèi)元素，需要手動改為 inline-block。

完整寫法為：

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);
}

設(shè)計師很滿意地離開了。

但過了幾天，他發(fā)現(xiàn)有些不對勁，又跑過來和我說：不對，這個換行的文字起始位置不應(yīng)該在圓點下邊，而是應(yīng)該和第一行文字左側(cè)對齊，也就是應(yīng)該像下面這樣。

::before + 絕對定位

問題不大，馬上改。

將 ::before 偽元素設(shè)置為絕對定位，讓圓點脫離正常文檔流。這次我們用 left 來調(diào)整位置。

完整的寫法為：

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;
}

效果很完美，設(shè)計師很滿意地離開了。

list-style-type 和 ::marker

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

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

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 使用不用樣式。

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

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

但這種方案在修改圓點大小后，無法使用 transform 進行位置的調(diào)整，所以我沒有用這個。

結(jié)尾

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