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

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

設(shè)計(jì)師說(shuō)我們這個(gè)，列表項(xiàng)樣式要優(yōu)化一下，太丑了，這個(gè)原點(diǎn)要大一點(diǎn)。

默認(rèn)的無(wú)序列表樣式是這樣的。

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

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

::before

我們先將 li 原有的圓點(diǎn)去掉，通過(guò)給 li 加上 list-style: none; 的方式。

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

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

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

注意點(diǎn)：這里 content 的值最好用轉(zhuǎn)義字符，不要用原字符，因?yàn)槲野l(fā)現(xiàn)在某些瀏覽器會(huì)亂碼。

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

需要注意的一點(diǎn)是，transform 對(duì)行內(nèi)元素(display: inline)無(wú)效。而 ::before 偽元素默認(rèn)為行內(nèi)元素，需要手動(dòng)改為 inline-block。

完整寫(xiě)法為：

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è)計(jì)師很滿意地離開(kāi)了。

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

::before + 絕對(duì)定位

問(wèn)題不大，馬上改。

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

完整的寫(xiě)法為：

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è)計(jì)師很滿意地離開(kāi)了。

list-style-type 和 ::marker

如果你不需要修改圓點(diǎn)大小，而是想替換為其他符號(hào)，還用一種寫(xiě)法是使用 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"; /* 飛機(jī)符號(hào) */
}

然后我們看到原點(diǎn)變成了飛機(jī)字符：

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

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

更具體的寫(xiě)法這里就不展開(kāi)講了，讀者可以自行閱讀官方文檔。

但這種方案在修改圓點(diǎn)大小后，無(wú)法使用 transform 進(jìn)行位置的調(diào)整，所以我沒(méi)有用這個(gè)。

結(jié)尾

小小的無(wú)序列表自定義樣式也挺多門(mén)道的，希望對(duì)你有所幫助。