概念

三種 List

<ul>、<ol> 以及 <dl>

<!-- Unordered Lists -->
<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

<!-- Ordered lists -->
<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

<!-- Description lists -->
<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

瀏覽器預設每一個 <li> 項目都為 display: list-item，都會渲染出 ::marker

＊<dl> Description list 中不使用 <li>，使用 <dt> (terms) 以及 <dd> (descriptions)

List styles

1. list-style-position

設定 ::marker 的位置，inside 或是 outside

list-style-position: inside;
list-style-position: outside;

圖取自 web.dev - Lists

2. list-style-image

使用圖片顯示清單項目的標記

ul {
  list-style-image: url("https://i.imgur.com/xxxxx.gif");
}

3. list-style-type

使用內建的關鍵字、自訂字串或是 emoji ...等，更改清單項目的標記

/* 實心圓，預設值 */
list-style-type: disc;

/* 中空圓 */
list-style-type: circle;

/* 實心正方形 */
list-style-type: square;

/* 數字，從 1 開始 */
list-style-type: decimal;

/* 國字 一、二、三 */
list-style-type: trad-chinese-informal;

/* 自訂字串 */
list-style-type: "-";

/* emoji */
list-style-type: "\1F44D";

可以使用 list-style 縮寫各項屬性

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

::marker

只要使用 list，瀏覽器都會替裡面的項目加上 ::marker pseudo-element，並提供部分 API 來修改樣式，::marker 能使用的相關屬性如下：

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space