반응형
ol 리스트 depth 별 스타일 지정하기
ol 에 리스트 스타일 이름을 지정해주고 li 에 지정된 리스트 이름을 연결 시키고, li:before 요소에 표현 방법을 구현하면 된다.
ol {
counter-reset: type1;
li:before {
counter-increment: type1;
content: counter(type1) ". ";
}
}
depth 별 스타일을 다르게 하고 싶다면 ol > li > ol > li 와 같이 선택자에 따라 다른 표현방식을 적어주면 된다.
See the Pen WNrLQQj by zinee (@zineeworld) on CodePen.
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment
반응형
'개발일지 > CSS' 카테고리의 다른 글
[CSS] iOS 11.2.1 max-height: calc(% - px) is not working (0) | 2018.12.20 |
---|---|
[CSS] table 구조에서 특정 셀만 숨기기 (0) | 2018.12.19 |
[CSS] pure css loarder (0) | 2018.12.19 |
[CSS] iOS tr box-shadow inset is not working (0) | 2018.12.19 |
[CSS] ios chrome/safari input placeholder 세로정렬 (0) | 2018.09.05 |