Styling Counters in CSS

Lists parts have been among the many first 18 tags that made up HTML. Their illustration wasn’t outlined but however deemed becoming a bulleted record for unordered lists, and a sequence of numbered paragraphs for an ordered record.

Cool however not sufficient; quickly individuals wanted extra from HTML alone and new record attributes have been added all through the years to fill within the gaps.

begin

The begin attribute takes an integer and units from the place the record ought to begin:

<ol begin="2">
  <li>Bread</li>
  <li>Milk</li>
  <li>Butter</li>
  <li>Apples</li>
</ol>

2. Bread
3. Milk
4. Butter
5. Apples

Though, it isn’t restricted to constructive values; zero and unfavourable integers are allowed as effectively:

<ol begin="0">
  <li>Bread</li>
  <li>Milk</li>
  <li>Butter</li>
  <li>Apples</li>
</ol>

<ol begin="-2">
  <li>Bread</li>
  <li>Milk</li>
  <li>Butter</li>
  <li>Apples</li>
</ol>

sort

We are able to use the sort attribute to vary the counter’s illustration. It’s much like CSS’s list-style-type, but it surely has its personal restricted makes use of and shouldn’t be used interchangeably*. Its potential values are:

• 1 for decimal numbers (default)
• a for lowercase alphabetic
• A for uppercase alphabetic
• i for lowercase Roman numbers
• I for uppercase Roman numbers

<ol sort="a">
  <li>Bread</li>
  <li>Milk</li>
  <li>Butter</li>
  <li>Apples</li>
</ol>

<ol sort="i">
  <li>Bread</li>
  <li>Milk</li>
  <li>Butter</li>
  <li>Apples</li>
</ol>

It’s bizarre sufficient to make use of sort on ol parts, but it surely nonetheless has some use instances*. Nonetheless, utilization with the ul aspect is downright deprecated.

worth

The worth attribute units the worth for a particular li aspect. This additionally impacts the values of the li parts after it.

<ol>
  <li>Bread</li>
  <li worth="4">Milk</li>
  <li>Butter</li>
  <li>Apples</li>
</ol>

1. Bread
4. Milk
5. Butter
6. Apples

reversed

The reversed attribute will begin counting parts in reverse order, so from highest to lowest.

<ol reversed>
  <li>Bread</li>
  <li>Milk</li>
  <li>Butter</li>
  <li>Apples</li>
</ol>

1. Bread
2. Milk
3. Butter
4. Apples

All may be mixed

In the event you ever really feel the necessity, all record attributes may be mixed in a single (ordered) record.

<ol reversed begin="2" sort="i">
  <li>Bread</li>
  <li worth="4">Milk</li>
  <li>Butter</li>
  <li>Apples</li>
</ol>

2. Bread
3. Milk
4. Butter
5. Apples

* Do we want them if we now have CSS?

Humorous sufficient, the first CSS specification already included list-style-type and different properties to model lists, and it was launched earlier than HTML 3.2 — the primary HTML spec that included a number of the earlier record attributes. Which means that a minimum of on paper, we had CSS record styling earlier than HTML record attributes, so the reply isn’t so simple as “they have been there earlier than CSS.”

With out CSS, a static web page (resembling this information) received’t be fairly, however on the very least, it needs to be readable. For instance, the sort attribute ensures that styled ordered lists received’t lose their that means if CSS is lacking, which is very helpful in authorized or technical paperwork. Some attributes wouldn’t have a CSS equal till years later, together with reversed, begin and worth.

::marker or ::earlier than?

The ::marker pseudo-element represents the counter a part of a listing merchandise. As a pseudo-element, we are able to set its content material property to any string to vary its counter illustration:

li::marker {
  content material: "💜 ";
}

• Bread
• Milk
• Butter
• Apples

The content material in pseudo-elements additionally accepts pictures, which permits us to create customized markers:

li::marker {
  content material: url("./emblem.svg") " ";
}

• bread
• milk
• butter
• apples

By default, solely li parts have a ::marker however we can provide it to any aspect by setting its show property to list-item:

h4 {
  show: list-item;
}

h4::marker {
  content material: "◦ ";
}

It will give every h4 a ::marker which we are able to change to any string:

Checklist Title

Nonetheless, ::marker is an odd case: it was described within the CSS spec greater than 20 years in the past, however solely gained considerably dependable help in 2020 and nonetheless isn’t absolutely supported in Safari. What’s worst, solely font-related properties (resembling font-size or shade) are allowed, so we are able to’t change its margin or background-color.

This has led many to make use of ::earlier than as an alternative of ::marker, so that you’ll see a number of CSS wherein the writer removed the ::marker utilizing list-style-type: none and used ::earlier than as an alternative:

li {
  /* removes ::marker */
  list-style-type: none;
}

li::earlier than {
  /* mimics ::marker */
  content material: "▸ ";
}

list-style-type

The list-style-type property can be utilized to switch the ::marker‘s string. Not like ::marker, list-style-type has been round endlessly and is most individuals’s go-to choice for styling lists. It will probably take loads of various counter kinds which are built-in in browsers, however you’ll most likely use one of many following:

For unordered lists:

• disc
• circle
• sq.

ul {
  list-style-type: sq.;
}

ul {
  list-style-type: circle;
}

For ordered lists:

• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha

ol {
  list-style-type: upper-roman;
}

ol {
  list-style-type: lower-alpha;
}

You will discover a full record of legitimate counter kinds right here.

It will probably additionally take none to take away the marker altogether, and since not way back, it will probably additionally take a <string> for ul parts.

ul {
  list-style-type: none;
}

ul {
  list-style-type: "➡️ ";
}

Provoke counters: counter-reset

The counter-reset property takes two issues: the title of the counter as a customized ident and the preliminary rely as an integer. If the preliminary rely isn’t given, then it’ll begin at 0 by default:

.index {
  counter-reset: index;
  /* The identical as */
  counter-reset: index 0;
}

You possibly can provoke a number of counters directly with a space-separated record and set a particular worth for every one:

.index {
  counter-reset: index another-counter 2;
}

It will begin our index counter at 0 (the default) and another-counter at 2.

Set counters: counter-set

The counter-set works much like counter-reset: it takes the counter’s title adopted by an integer, however this time it’ll set the rely for that aspect onwards. If the integer is omitted, it’ll set the counter to 0 by default.

h2:nth-child(2) {
  counter-set: index;
  /* similar as */
  counter-set: index 0;
}

And we are able to set a number of counters directly, as effectively:

h2:nth-child(3) {
  counter-set: index 5 another-counter 10;
}

It will set the third h2 aspect’s index rely to 5 and another-counter to 10.

If there isn’t an energetic counter with that title, counter-set will provoke it at 0.

Increment counters: counter-increment

Proper now, we now have our counter, however it’ll stagnate at 0 since we haven’t set which parts ought to increment it. We are able to use the counter-increment property for that, which takes the title of the counter and the way a lot it needs to be incremented by. If we solely write the counter’s title, it’ll increment it by 1.

On this case, we would like every h2 title to increment the counter by one, and that needs to be as straightforward as setting counter-increment to the counter’s title:

h2 {
  counter-increment: index;
  /* similar as */
  counter-increment: index 1;
}

Similar to with counter-reset, we are able to increment a number of counters directly in a space-separated record:

h2 {
  counter-increment: index another-counter 2;
}

It will increment index by one and another-counter by two on every h2 aspect.

If there isn’t an energetic counter with that title, counter-increment will provoke it at 0.

Output easy lists: counter()

To this point, we received’t see any change within the counter illustration. The counters are counting however not displaying, so to output the counter’s consequence we use the counter() and counters() capabilities. Sure, these are two capabilities with related names however vital variations.

The counter() operate takes the title of a counter and outputs its content material as a string. If many energetic counters have the identical title, it’ll choose the one that’s outlined closest to the aspect, so we are able to solely output one counter at a time.

As talked about earlier, we are able to set a component’s show to list-item to work with its ::marker pseudo-element:

h2 {
  show: list-item;
}

Then, we are able to use counter() in its content material property to output the present rely. This enables us to prefix and suffix the counter by writing a string earlier than or after the counter() operate:

h2::marker {
  content material: "Half " counter(index) ": ";
}

Alternatively, we are able to use the on a regular basis ::earlier than pseudo-element to the identical impact:

h2::earlier than {
  content material: "Half " counter(index) ": ";
}

Output nested lists: counters()

counter() works nice for many conditions, however what if we wished to do a nested record like this:

1. Paradise Seashores
   1.1. Hawaiian Islands
   1.2. Caribbean Getaway
        1.2.1. Aruba
        1.2.2. Barbados
2. Outside Escapades
   2.1 Nationwide Park Hike
   2.2. Mountain Snowboarding Journey

We would want to provoke particular person counters and write completely different counter() capabilities for every degree of nesting, and that’s solely potential if we all know how deep the nesting goes, which we merely don’t at instances.

On this case, we use the counters() operate, which additionally takes the title of a counter as an argument however as an alternative of simply outputting its content material, it’ll be a part of all energetic counters with that title right into a single string and output it. To take action, it takes a string as a second argument, normally one thing like a dot (".") or sprint ("-") that might be used between counters to affix them.

We are able to use counter-reset and counter-increment to provoke a counter for every ol aspect, whereas every li will increment its closest counter by 1:

ol {
  counter-reset: merchandise;
}

li {
  counter-increment: merchandise;
}

However this time, as an alternative of utilizing counter() (which might solely show one counter per merchandise), we are going to use counters() to affix all energetic counters by a string (e.g. ".“) and output them directly:

li::marker {
  content material: counters(merchandise, ".") ". ";
}

Styling Counters

Each the counter() and counters() capabilities settle for one further, but elective, final argument representing the counter model, the identical ones we use within the list-style-type property. So in our final two examples, we might change the counter kinds to Roman numbers and alphabetic letters, respectively:

h2::marker {
  content material: "Half " counter(index, upper-roman) ": ";
}

li::marker {
  content material: counters(merchandise, ".", lower-alpha) ". ";
}

Reverse Counters

It’s potential to rely backward utilizing customized counters, however we have to know beforehand the variety of parts we’ll rely. So for instance, if we need to make a High 5 record in reversed order:

<h1>Finest rated animation films</h1>

<ol>
  <li>Toy Story 2</li>
  <li>Toy Story 1</li>
  <li>Discovering Nemo</li>
  <li>How one can Prepare your Dragon</li>
  <li>Inside Out</li>
</ol>

We now have to provoke our counter on the complete variety of parts plus one (so it doesn’t finish at 0):

ol {
  counter-reset: films 6;
}

After which set the increment to a unfavourable integer:

li {
  counter-increment: films -1;
}

To output the rely we use counter() as we did earlier than:

li::marker {
  content material: counter(films) ". ";
}

There may be additionally a option to write reversed counters supported in Firefox, however it hasn’t shipped to another browser. Utilizing the reversed() practical notation, we are able to wrap the counter title whereas initiating it to say it needs to be reversed.

ol {
  counter-reset: reversed(films);
}

li {
  counter-increment: films;
}

li::marker {
  content material: counter(films) " .";
}

The system descriptor

The symbols or additive-symbols descriptors outline the characters used for the counter model, whereas system says easy methods to use them.

The legitimate system values are:

• cyclic
• alphabetic
• symbolic
• additive
• mounted
• extends

cyclic will undergo the characters set on symbols and repeat them. We are able to use only one character within the symbols to imitate a bullet record:

@counter-style cyclic-example {
  system: cyclic;
  symbols: "⏵";
  suffix: " ";
}

• bread
• butter
• milk
• apples

Or alternate between two or extra characters:

@counter-style cyclic-example {
  system: cyclic;
  symbols: "🔸" "🔹";
  suffix: " ";
}

mounted will write the characters in symbols descriptor only one time. Within the final instance, solely the primary two gadgets could have a customized counter if set to mounted, whereas the others will drop to their fallback, which is decimal by default.

@counter-style multiple-example {
  system: mounted;
  symbols: "🔸" "🔹";
  suffix: " ";
}

We are able to set when the customized counters begin by appending an <integer> to the mounted worth. For instance, the next customized counter will begin on the fourth merchandise:

@counter-style fixed-example {
  system: mounted 4;
  symbols: "💠";
  suffix: " ";
}

numeric will numerate record gadgets utilizing a customized positional system (base-2, base-8, base-16, and many others.). Positional programs begin at 0, so the primary character at symbols might be used as 0, the subsequent as 1, and so forth. Realizing this, we are able to make an ordered record utilizing non-decimal numerical programs like hexadecimal:

@counter-style numeric-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "A" "B" "C" "D" "E" "F";
  suffix: ". ";
}

9. bread
10. butter
11. milk
12. apples

alphabetic will enumerate the record gadgets utilizing a customized alphabetical system. It’s much like the numeric system however with the important thing distinction that it doesn’t have a personality for 0, so the subsequent digits are simply repeated. For instance, if our symbols are "A" "B" "C" they may wrap to "AA", "AB", "AC", then BA, BB, BC and so forth.

Since there isn’t a equal for 0 and unfavourable values, they may drop right down to their fallback.

@counter-style alphabetic-example {
  system: alphabetic;
  symbols: "A" "B" "C";
  suffix: ". ";
}

1. bread
2. butter
3. milk
4. apples
5. cinnamon

symbolic will undergo the characters in symbols repeating them yet one more time every iteration. So for instance, if our symbols are "A", "B", "C", it’ll go “A”, “B”, and “C”, double them within the subsequent iteration as “AA”, “BB”, and “CC”, then triple them as “AAA”, “BBB”, “CCC” and so forth.

Since there isn’t a equal for 0 and unfavourable values, they may drop right down to their fallback.

@counter-style symbolic-example {
  system: symbolic;
  symbols: "A" "B" "C";
  suffix: ". ";
}

1. bread
2. butter
3. milk
4. apples
5. cinnamon

additive will give characters a numerical worth and add them collectively to get the counter illustration. You possibly can consider it as the way in which we normally rely payments: if we now have solely $5, $2, and $1 payments, we are going to add them collectively to get the specified amount, attempting to maintain the variety of payments used at a minimal. So to characterize 10, we are going to use two $5 payments as an alternative of ten $1 payments.

Since there isn’t a equal for unfavourable values, they may drop right down to their fallback.

@counter-style additive -example {
  system: additive;
  additive-symbols: 5 "5️⃣", 2 "2️⃣", 1 "1️⃣";
  suffix: " ";
}

Discover how we use additive-symbols when the system is additive, whereas we use simply symbols for the earlier programs.

extends will create a customized model from one other one however with modifications. To take action, it takes a <counter-style-name> after the extends worth. For instance, we might change the decimal counter model default’s suffix to a closing parenthesis (")")`:

@counter-style extends-example {
  system: extends decimal;
  suffix: ") ";
}

1. bread
2. butter
3. milk
4. cinnamon

Per spec, “If a @counter-style makes use of the extends system, it should not include a symbols or additive-symbols descriptor, or else the @counter-style rule is invalid.”

The opposite descriptors

The unfavourable descriptor permits us to create a customized illustration for a listing’s unfavourable values. It will probably take one or two characters: The primary one is prepended to the counter, and by default it’s the hyphen-minus ("-"). The second is appended to the image. For instance, we might enclose unfavourable representations into parenthesis (2), (1), 0, 1, 2:

@counter-style negative-example {
  system: extends decimal;
  unfavourable: "(" ")";
}

-2. bread
-1. butter
0. milk
1. apples

The prefix and suffix descriptors permit us to prepend and append, respectively, a personality to the counter illustration. We are able to use it so as to add a personality at first of every counter utilizing prefix:

@counter-style prefix-suffix-example {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

• bread
• butter
• milk
• apples

The vary descriptor defines an inclusive vary wherein the counter model is used. We are able to outline a bounded vary by writing one <integer> subsequent to a different. For instance, a spread of 2 4 will have an effect on parts 2, 3, and 4:

@counter-style range-example {
  system: cyclic;
  symbols: "‣";
  suffix: " ";
  vary: 2 4;
}

• bread
• butter
• milk
• apples
• cinnamon

However, utilizing the infinite worth we are able to unbound the vary to 1 aspect. For instance, we might write infinite 3 so all gadgets as much as 3 have a counter model:

@counter-style range-example {
  system: alphabetic;
  symbols: "A" "B" "C";
  suffix: ". ";
  vary: infinite 3;
}

• bread
• butter
• milk
• apples
• cinnamon

The pad descriptor takes an <integer> that represents the minimal width for the counter and a personality to pad it. For instance, a zero-padded counter model would appear like the next:

@counter-style pad-example {
  system: extends decimal;
  pad: 3 "0";
}

• bread
• butter
• milk
• apples

The fallback descriptor means that you can outline which counter model needs to be used as a fallback every time we are able to’t characterize a particular rely. For instance, the next counter model is mounted and can fallback to lower-roman after the sixth merchandise:

@counter-style fallback-example {
  system: mounted;
  symbols: "⚀" "⚁" "⚂" "⚃";
  fallback: lower-roman;
}

• bread
• butter
• milk
• apples
• cinnamon

Lastly, the speak-as descriptor hints to speech readers on how the counter model needs to be learn. It may be:

• auto Makes use of the system default.
• bullets reads an unordered record. By default, cyclic programs are learn as bullets
• numbers reads the counter’s numeric worth within the content material language. By default, additive, mounted, numeric, and, symbolic are learn as numbers.
• phrases reads the counter illustration as phrases.
• spell-out reads the counter illustration letter by letter. By default, alphabetic is learn as spell-out.
• <counter-style-name> It would use that counter’s speak-as worth.

@counter-style speak-as-example {
  system: extends decimal;
  prefix: "Merchandise ";
  suffix: " is ";
  speak-as: phrases;
}

symbols()

The symbols() operate defines an only-use counter model with out the necessity to do a complete @counter-style, however at the price of lacking some options. It may be used contained in the list-style-type property and the counter() and counters() capabilities.

ol {
  list-style-type: symbols(cyclic "🥬");
}

Nonetheless, its browser help is appalling because it’s solely supported in Firefox.

list-style-image

The list-style-image can take a picture or a gradient. On this case, we need to concentrate on pictures however gradients will also be used to create customized sq. bullets:

li {
  list-style-image: conic-gradient(crimson, yellow, lime, aqua, blue, magenta, crimson);
}

• bread
• butter
• milk
• apples

Sadly, altering the form would require styling extra the ::marker and this isn’t at the moment potential.

To make use of a picture, we move its url(), make certain is sufficiently small to work as a counter:

li {
  list-style-image: url("./emblem.svg");
}

• bread
• milk
• butter
• apples

content material

The content material property works much like list-style-image: we move the picture’s url() and supply slightly padding on the left as an empty string:

li::marker {
  content material: url("./emblem.svg") " ";
}

Margins and paddings are wacky

Spacing the ::marker from the record merchandise needs to be as straightforward as growing the marker’s or record margin, however in actuality, it takes much more work.

First, the padding and margin properties aren’t allowed in ::marker. Whereas lists have two sorts of parts: the record wrapper (normally ol or ul) and the record merchandise (li), every with a default padding and margin. Which ought to we use?

You possibly can check every property on this demo by Šime Vidas in his article devoted to the hole after the record marker:

You’ll discover how the one property that impacts the spacing inside ::marker and the textual content is the li merchandise’s padding property, whereas the remainder of the spacing properties will transfer your complete record merchandise. One other factor to notice is even when the padding is ready to 0px, there’s a house after the ::marker. That is set by browsers and can fluctuate relying on which browser you’re utilizing.

list-style-position

One final thing it’s possible you’ll discover within the demo is a checkbox for the list-style-position property, and the way when you set it to inside, the ::marker will transfer to the within of the field, at the price of eradicating any spacing given by the record merchandise’s padding.

By default, markers are rendered outdoors the ul aspect’s field. Lots of instances, this isn’t the perfect habits: markers sneak out of parts, text-align received’t align the marker, and paradoxically, centered lists with flex or grid received’t look fully centered for the reason that markers are outdoors the field.

To alter this we are able to use the list-style-position property, it may be both outdoors (default) and inside to outline the place to place the record marker: both outdoors or the surface of the ul field.

ul {
  border: strong 2px crimson;
}

.inside {
  list-style-position: inside;
}

.outdoors {
  list-style-position: outdoors;
}

content material with empty strings

In the identical article, Šime says:

Appending an area to content material feels extra like a workaround than the optimum resolution.

And I fully agree that’s true, however simply utilizing ::marker there isn’t a appropriate means so as to add spacing between the ::marker and the record textual content, particularly since most individuals desire to set list-style-position to inside. So, as a lot because it pains me to say it, the best option to enhance the hole after the marker is to suffix the content material property with an empty string:

li::marker {
    content material: "•   ";
}

• bread
• milk
• butter
• apples

BUT! That is provided that we need to be purists and stick to the ::marker pseudo-element as a result of, in actuality, there’s a a lot better option to place that marker: not utilizing it in any respect.

Simply use ::earlier than

There’s a cause individuals love utilizing the ::earlier than greater than ::marker. First, we are able to’t use one thing like CSS Grid or Flexbox since altering the show of li to one thing aside from list-item will take away the ::marker, and we are able to set the ::marker‘s peak or width properties to raised align it.

Let’s be actual, ::marker works fantastic after we simply need easy styling. However we aren’t right here for easy styling! As soon as we would like one thing extra concerned, ::marker will fall quick and we’ll have to make use of the ::earlier than pseudo-element.

Utilizing ::earlier than means we are able to use Flexbox, which permits for 2 issues we couldn’t do earlier than:

• Vertically middle the marker with the textual content
• Simply enhance the hole after the marker

Each may be achieved with Flexbox:

li {
  show: flex;
  align-items: middle; /* Vertically middle the marker */
  hole: 20px; /* Will increase the hole */

  list-style-type: none;
}

The unique ::marker is eliminated by altering the show.