Open Lauviah0622 opened 4 years ago
中文 => 項目符號 英文 => marker
沒有改動的情況
ul 通常會有一個 paddin-left 然後 list-style-position 在 外面,也就是在那個 padding 裡面
list-style-type: "ㄖ. ";
也可以放入任意文字
::marker:前面的東西被稱作為 marker (標記)可以設定前面的
但是支援度目前不高 https://caniuse.com/#feat=css-marker-pseudo chrome 要 v.86 才可以用
counter-reset 渲染到這個 css 的就會重製變數 counter-increment 渲染到這個就會讓變數 +1 content: counter 顯示變數
https://css-tricks.com/custom-list-number-styling/
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
這個太冷門了...支援度太低
https://developer.mozilla.org/zh-TW/docs/Web/CSS/symbols
list-style
前面的符號要叫甚麼:
中文 => 項目符號 英文 => marker
list 的構造
沒有改動的情況
ul 通常會有一個 paddin-left 然後 list-style-position 在 外面,也就是在那個 padding 裡面
基本的三個屬性
list-style-type: "ㄖ. ";
也可以放入任意文字
直接調整項目符號
::marker:前面的東西被稱作為 marker (標記)可以設定前面的
但是支援度目前不高 https://caniuse.com/#feat=css-marker-pseudo chrome 要 v.86 才可以用
counter 系列
counter-reset 渲染到這個 css 的就會重製變數 counter-increment 渲染到這個就會讓變數 +1 content: counter 顯示變數
https://css-tricks.com/custom-list-number-styling/
counter-style
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
這個太冷門了...支援度太低
https://developer.mozilla.org/zh-TW/docs/Web/CSS/symbols