Traditional lists via the <ul>
, <ol>
, <dl>
tags aren't too versatile when it comes to styling the markers. Sometimes, we have to rely on extra markup to accomplish some minimal custom styling.
CSS counters, on the other hand, take styling lists (or any element for that matter) to a whole new level of customization and styling.
Granted, CSS counters rely not only on the properties we're going to see next, but also on the content
property and the :before
pseudo-element.
Let's check out the properties that make CSS counters so great.
The
counter-reset
CSS property resets the counter by giving it a name, and it looks like this:
counter-reset: basic-counter;
The counter-reset
property serves two purposes: resets the counter and defines a name for the counter. The name is later used by the counter-increment
and counter()
/counters()
functions that we'll see later.
I have to admit that the term "counter-reset
" isn't as intuitive as it should be if it's used to set a name for the counter. Something like "counter-name
" would be more suitable if you ask me.
This property supports two values: a name and a number.
We can reference multiple counter resets in the same declaration.
We need to give the reset counter a name. This value is required. It can be any name but it needs to adhere to the following conditions:
_
", or a hyphen "-
"-
" character but cannot have two consecutive hyphens at the beginning of the name-
"; at least one more character is required, but it can't be a number since it would be interpreted as "minus 1
" (-1
)#
, $
, !
, and so onIt's the number that the counter is reset to. The default value is 0
(zero) if no value is declared.
This value is optional unless we want to start the list from a number different than 1
. Pay close attention to this value, because the first number in the list is not the number declared in this value.
If we set the value to 1
, the list starts at 2
. If we leave the value empty, it defaults to 0
(zero) and the list starts at 1
. Negative values are valid.
CSS:
/*Define a name and counter reset to 0*/ ul { counter-reset: basic-counter; } /*The counter will start at 3*/ ul { counter-reset: basic-counter 2; } /*Multiple counters in a single declaration*/ ul { counter-reset: basic-counter-A, basic-counter-B 2; }
The
counter-increment
CSS property increments the value of one or more counters, and it looks like this:
counter-increment: basic-counter 2;
This property is used with the counter-reset
CSS property. This is because the name specified in the counter-reset
property is used in the counter-increment
CSS property.
As a refresher, remember that the counter name will also be used by the counter()
/counters()
function.
We can declare multiple counter increments in the same declaration. Multiple counters are separated by a space. This property supports two values: A name and a number.
It can be any name but it needs to adhere to the following conditions:
_
", or a hyphen "-
"-
" character but not have two consecutive hyphens at the beginning of the name-
"; at least one more character is required, but it can't be a number since it would be interpreted as "minus 1
" (-1
).#
, $
, !
, and so on.This is the number that the counter is reset to. The default value is 0
(zero) if no value is declared. This value is optional unless we want to start the list from a number different than 1
.
Now, the number
value defines the amount of increments each counter will have. For example, if we declare 2
, then the counter will be 2
, 4
, 6
, and so on. If we declare 3
, then the counter will be 3
, 6
, 9
, and so on.
If we do not declare a value, the default increment will be by 1
, as in 1
, 2
, 3
, and so on.
Negative values are valid. If we declare -2
, then the counter will be -2
, -4
, -6
, and so on.
CSS:
/*First, define a name and counter reset to 0 with counter-reset*/ ul { counter-reset: basic-counter; } /*Then, invoque the counter name and increment every element by 2 (2, 4, 6, and so on.)*/ ul li { counter-increment: basic-counter 2; } /*Multiple counters*/ ul li { counter-increment: basic-counter 2 roman-numeral-counter; }
Here is a demo in CodePen: http://tiny.cc/css-counters
3.144.114.85