僞元素content 插入其他ICON與文字符號

STEP1. 首先設定li基本屬性內容，再利用counter-increment: title1; //新增一自訂增加編號計數依據。

再藉由::before加入content:搭配【list-style-type】的值配合字串設計出中文項目符號。 如// content:"第"counter(title1,cjk-ideographic)"章："; 與文字屬性。

【編號清單符號參考】

STEP2. 相同方式，再加入第二層li的設定，並可沿用前一組編號計數依據title1:

STEP3. 以此類推，加入第三層以上:

只要知道各符號代碼，配合【::before】【::after】即可靈活應用。

【HTML符號參考】

由提供字體符號網站下載文字檔與相關CSS檔，再串連相關CSS置頁面中:

【參考連結】

再以span標籤並加上套用類別icon，並以行內樣式設定符號屬性即可。

【檢視範例】【下載範例】

相關課程 : 精修DIV+CSS網頁排版設計輕鬆做