在CSS中,有一種常見的功能是左邊數(shù)字提示,在我們平時(shí)瀏覽網(wǎng)頁時(shí)會(huì)經(jīng)常看到,這種功能通常用于列表或者代碼塊中。
實(shí)現(xiàn)這種功能的方法很簡單,只需為需要添加數(shù)字提示的元素設(shè)置counter-reset
和counter-increment
屬性,然后在需要顯示數(shù)字的地方使用content
屬性即可。
ul {
counter-reset: item; /* 設(shè)置計(jì)數(shù)器 */
list-style: none; /* 去掉原有標(biāo)記 */
}
li::before {
counter-increment: item; /* 增加計(jì)數(shù)器 */
content: counter(item) '. '; /* 顯示數(shù)字 */
}
上述代碼中的ul
是需要添加數(shù)字提示的列表,li::before
利用偽元素::before
來顯示數(shù)字提示,counter-increment
用于增加計(jì)數(shù)器,content
用于顯示數(shù)字和后面的點(diǎn)號(hào)。
使用這種方法,可以快速簡便地實(shí)現(xiàn)左邊數(shù)字提示的效果,而且不影響頁面樣式的美觀性。