Customize your numbered list
Use @counter-style to customize your <ol> list with a simple code
- No extra markup
- No pseudo-element
- No need for
counter() - Keep the default browser algorithm
@counter-style new-style {
system: extends decimal;
suffix: ") ";
prefix: "(";
}
ol {
list-style-type: new-style;
}See the Pen Custom numbered list by Temani Afif (@t_afif) on CodePen.