🇹🇼

【學習筆記】 CSS 自訂標號圖示、段落縮排效果

發佈時間

CSS 中的標號圖示#

在 HTML & CSS 中，想要建立段落標號樣式，可透過下列幾種方法：

  • 第一種：<span> 行內標籤
    • 可插入 icon，但用在排序會較不符合語意化
<li><span>(1)</span>這是第一項</li>

<li><mat-icon class="cat"></mat-icon>這是一隻貓</li>
  • 第二種：使用 ul（無序）、ol（有序）項目標籤
    • 透過 li::before 自訂標號圖示，同樣可插入 icon

ul li 或 ol, li 項目標籤#

在 HTML 中，可根據是否需呈現排序項目，使用 ol li 標籤；若不需排序，就直接使用 ul li 標籤。

可參考以下範例：

<!-- 無序列 -->
<ul>
　<li>星期一</li>
　<li>星期二</li>
</ul>

<!-- 有序列 -->
<ol>
　<li>星期一</li>
　<li>星期二</li>
</ul>

輸出效果如下：

  • 星期一
  • 星期二
  1. 星期一
  2. 星期二

CSS list-style 列表屬性#

CSS 列表屬性，可用來調整列表的顯示功能，也就是上述提到的 ul li 或 ol li 項目標籤。

以下介紹幾種列表屬性：

  • list-style-type：修改列表開頭符號
  • list-style-image：修改列表開頭小圖示
  • list-style-position：修改列表的顯示位置

list-style-type 屬性：修改列表開頭顯示符號#

我們可透過 <ul>, <ol> 元素的 type 屬性，改變開頭編號的種類，如以下範例：

<!-- 小寫字母 -->
<ul style="list-style-type:lower-alpha;">
　<li>lower-alpha</li>
　<li>lower-alpha</li>
</ul>

<!-- 羅馬字母 -->
<ul style="list-style-type: lower-roman;">
  <li>lower-roman</li>
  <li>lower-roman</li>
</ul>

輸出效果如下：

a. lower-alpha
b. lower-alpha

i. lower-roman
ii. lower-roman

list-style-image 屬性：修改列表開頭為小圖示#

  • HTML 標籤
<ul>
　<li>開頭符號為圖示的清單</li>
　<li>開頭符號為圖示的清單</li>
</ul>
  • CSS 樣式
ul li {
　list-style-image: url('圖片路徑.svg');
}

list-style-position：修改列表的顯示位置#

  • HTML 標籤
<ul class="p1">
　<li>這是在標籤範圍之內顯示</li>
　<li>這是在標籤範圍之內顯示</li>
</ul>

<ul class="p2">
　<li>這是在標籤範圍之外顯示</li>
　<li>這是在標籤範圍之外顯示</li>
</ul>
  • CSS 樣式
/* 項目符號在 li 範圍內 */
ul.p1 {
　list-style-position: inside;
}
/* 項目符號在 li 範圍外（預設值） */
ul.p2 {
　list-style-position: outside;
}
/* 可用來確認 li 項目位置 */
li {
　border: 1px #cccccc solid;
}

Custom List Style 自訂標號樣式#

假如不想使用 ul, ol 標籤預設樣式，也可透過下列步驟來自訂標號樣式：

  • 在 ol 取消預設樣式，並自訂一個標號變數
ol {
  list-style: none;
  counter-reset: my-counter;
}
  • 在 ol li 使用自訂標號，可透過 text-indent 修改段落縮排：
ol li {
/*  使用自訂標號  */
  counter-increment: my-counter;
/* 段落首行縮排 */
  text-indent: -1em;
}
  • 透過偽元素 li::before 使用自訂標號樣式，例如 (1)，即可插入想要的符號．或也可以替換成 url 路徑插入圖示：
/* 代表在自訂變數前後加上 ( ) */
ol li::before {
  content: "("counter(my-counter) ")";
}

完成的 CSS 樣式如下：

ol {
  list-style: none;
/*  命名自訂標號變數  */
  counter-reset: my-counter;
}
ol li {
/*  使用自訂標號  */
  counter-increment: my-counter;
/* 段落首行縮排 */
  text-indent: -1em;
}
/* 以偽元素自訂標號樣式 */
ol li::before {
  content: "("counter(my-counter) ")";
  color: blue;
  font-weight: bold;
}
  • 以下 DEMO 樣式渲染結果：DEMO