티스토리 뷰
.list type decimal 출력 결과 :
1.
2.
3.
.list_type_nodot 출력 결과 :
1
2
3
.list_type_circle 출력 결과 :
①
②
③
/* list type decimal */
.list_type_decimal{
counter-reset: type-decimal;
}
.list_type_decimal li{
display: block;
}
.list_type_decimal li:before{
margin-right: 4px;
content: counter(type-decimal) ".";
counter-increment: type-decimal;
}
/* list type decimal remove dot */
.list_type_nodot{
counter-reset: type-nodot;
}
.list_type_nodot li:before{
content: counter(type-nodot) "";
counter-increment: type-nodot;
}
/* list type decimal with circle */
.list_type_circle{
counter-reset: type-circle;
}
.list_type_circle li{
display: block;
position: relative;
padding-left: 34px;
}
.list_type_circle li:before{
display: inline-block;
content: counter(type-circle) "";
counter-increment: type-circle;
position: absolute;
top: 0;
left: 0;
margin-right: 12px;
border: 1px solid #000;
border-radius: 50%;
width: 22px;
height: 22px;
text-align: center;
box-sizing: border-box;
}
'WebPublisher > CSS' 카테고리의 다른 글
[CSS] 좌측으로 무한 흘러가는 플로팅 효과 marquee를 CSS로 구현 (0) | 2024.02.21 |
---|---|
[css] input[type='file'] 파일 버튼 커스텀하기 (0) | 2024.01.30 |
[CSS] unicode-range 사용해 영문, 숫자만 다른 글꼴(roboto) 적용하기 (0) | 2023.12.18 |
[css] text-size-adjust (0) | 2023.12.12 |
[css] shining event (0) | 2023.11.09 |
공지사항