Lauviah0622 / junior_frontend_program

1 stars 0 forks source link

[極短篇] 手工打造 list-item #4

Open Lauviah0622 opened 4 years ago

Lauviah0622 commented 4 years ago

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