WebPublisher/CSS
[css] list style decimal에서 온점(point) 없애기
amanda
2023. 12. 20. 14:13
.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;
}