11777 shaares
373 private links
373 private links
ul.notes li {
list-style-type: "Note: ";
list-style-position: inside;
}The ::marker pseudo-selector can be used to customize the rest. Generating content for markers is supported by Chromium and Firefox, but not by WebKit.
A list of symbols can be used with symbols(). The browser support is not great though. @counter-style can be used instead. It's Baseline Newly Available since 2023.
There is also the old ::before trick to set custom contents.
As summary:
| CSS | Use Case |
|---|---|
| list-style | Changing the basic bullet styles or numbering system. Using a Unicode symbol, emoji or text in place of a bullet. Using images for bullets. |
| li::marker | Colouring the numbering or bullets differently to the list text. Changing the font- properties of the numbering (but not its size unless the difference is subtle). |
| symbols() | Only supported by Firefox, use @counter-style instead. |
| @counter-style | For defining your own sequence of bullet symbols (not images) or a completely customised numbering system. |
| extends | Used within @counter-style to modify existing numbering systems, for example to change or remove the default ”.” suffix. |
| li::before | For complete control over marker positioning, especially if your bullets or numbering are much larger than the list text. |
