본문 바로가기
코딩/CSS

ol 태그 css로 자동 넘버링

by euntori 2022. 11. 11.
반응형
ol.dot_list{counter-reset:numbering;list-style:none;}
ol.dot_list > li{position:relative;padding-left:33px;}
ol.dot_list > li:before{counter-increment:numbering;content:counter(numbering);position:absolute;top:7px;left:0;width:22px;height:22px;font-size:13px;line-height:22px;font-weight:800;text-align:center;color:#fff;border-radius:100%;background:#62676e;}
ol.dot_list > li > p{font-size:22px;line-height:38px;}

 

> 꺽쇠를 넣는 이유는 li 하위에 또 다른 ol이 왔을때 

그 안에 넘버링도 자동으로 인식 되기 때문에 그걸 막기 위해서 지정해 둠.

반응형

'코딩 > CSS' 카테고리의 다른 글

focus 그라데이션 효과  (0) 2024.12.03
피그마 corner smoothings css로 주기  (0) 2024.11.26
css 가운데 정렬 transform  (0) 2021.11.01

Designed by 티스토리