僞元素content 插入其他ICON與文字符號
2020/05/11閱讀時間約 1 分鐘
A.自訂編號清單
STEP1.
首先設定li基本屬性內容，再利用counter-increment: title1; //新增一自訂增加編號計數依據。
首先設定li基本屬性內容，再利用counter-increment: title1; //新增一自訂增加編號計數依據。
再藉由::before加入content:搭配【list-style-type】的值配合字串設計出中文項目符號。 如// content:"第"counter(title1,cjk-ideographic)"章："; 與文字屬性。
STEP2.
相同方式，再加入第二層li的設定，並可沿用前一組編號計數依據title1:
相同方式，再加入第二層li的設定，並可沿用前一組編號計數依據title1:
STEP3.
以此類推，加入第三層以上:
以此類推，加入第三層以上:
B.html符號
只要知道各符號代碼，配合【::before】【::after】即可靈活應用。
【HTML符號參考】
C.字體符號- RaphaelIcons
由提供字體符號網站下載文字檔與相關CSS檔，再串連相關CSS置頁面中:
【參考連結】
再以<span>標籤並加上套用類別icon，並以行內樣式設定符號屬性即可。
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
為什麼會看到廣告
留言0
查看全部