css list-style 自訂計數器方式

css list-style  自訂計數器方式

一般我們在撰寫html帶有數字的有序列表時會運用到 ol + li 

這種方式在文章編輯上是很好用的, 例如

<ol>
  <li>順序一</li>
  <li>順序二</li>
  <li>順序三</li>
</ol>

呈現會像以下這樣這樣

1. 順序一
2. 順序二
3. 順序三

但是這樣的樣式算是一號樣式, 最多讓你改個顏色

如果今天想要用一些比較華麗的樣式, 光靠 ol 是不夠的

那要怎樣可以達到自訂樣式？

首先先撰寫html 我們用 ul 來呈現

<ul class="ul">
  <li>順序一</li>
  <li>順序二</li>
  <li>順序三</li>
</ul>

呈現如下

• 順序一
• 順序二
• 順序三

建議您在ul上加上class 以免造成全站在其他標籤的衝突

接下來我們撰寫css

.ul {
    list-style: none;
    padding: 0;
    margin: 0
} //先將ul預設樣式取消

接著我們給 li 一個

自訂樣式的宣告屬性 counter-increment: step; //名稱可自訂

像是.... 

.ul li {
  counter-increment: step; //自訂計數器名稱
}

接著在li上再加上一個位於前方的假元素屬性 before
像是.... 
.ul li:before {
  content: counter(step); 
//counter() 必須填上您在counter-increment自訂的名稱
}

現在你可以自訂你要的樣式了 , 這樣列表就會自動依序標號
.ul li li:before {
        line-height: 45px;
        text-align: center;
        color: #fff;
        background: #000;
        content: counter(step); 
        display: inline-block;
        border-radius: 100%;
        width: 45px;
        height: 45px;
}

完成效果如圖

 css 寫法 

.ul {
    list-style: none;
    padding: 0;
    margin: 0
} //先將ul預設樣式取消

.ul li {
  counter-increment: step; //自訂計數器名稱
}

.ul li li:before {
        line-height: 45px;
        text-align: center;
        color: #fff;
        background: #000;
        content: counter(step); 
        display: inline-block;
        border-radius: 100%;
        width: 45px;
        height: 45px;
}

Scss 寫法 

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
      counter-increment: step; //自訂計數器名稱
      &:before {
        line-height: 45px;
        text-align: center;
        color: #fff;
        background: #000;
        content: counter(step); 
        display: inline-block;
        border-radius: 100%;
        width: 45px;
        height: 45px;
      }
    }
  }