Styling lists in CSS

Markers are their own little box now, addressable without a pseudo-element hack.

.steps {
  list-style: decimal-leading-zero;
  padding-inline-start: 2.5rem;
}

.steps li::marker {
  color: #2b6cb0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li::before {
  content: "\2713\a0";
  color: #16a34a;
}

How it works

1. list-style sets the marker type, image and position in one go.
2. ::marker styles the bullet or number itself.
3. A list used for layout should say so with list-style: none and a role.

Keywords and builtins used here

• checklist
• color
• content
• padding
• rem
• steps

The run, in numbers

Lines

20

Characters to type

277

Tokens

59

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 47 seconds.

Type this snippet

Step 1 of 3 in Styling content, step 23 of 26 in Selectors & the box model.

← Previous Next →