반응형
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 |