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;
}