Articles
Introduction to CSS
List-related CSS properties

List-related CSS properties

This article explains list-related CSS properties.

You can learn how to use and write the list-style property and the counter() function.

YouTube Video

HTML for Preview

css-list.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

List-related

list-style property 

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

The list-style property is a CSS property used to specify the style of list markers (bullets) or numbers for HTML list elements such as <ul> and <ol>. This property allows you to control the overall style of the list, making it useful for customizing the appearance of lists.

In this example, the following styles are applied.

  • ul: Hollow circle bullets are displayed inside.
  • ol: Numbered with uppercase Roman numerals and the numbers are displayed outside.
  • custom-list class: The specified image is displayed as a bullet.

list-style structure

list-style is a shorthand for the following three properties:

  • list-style-type: Specifies the type of marker (bullet or number) for list items.
  • list-style-position: Specifies whether the marker is placed inside (inside) or outside (outside) the list item.
  • list-style-image: Specifies an image to be used as the list marker.

Basic Usage 

1ul {
2    list-style: square inside url('path/to/image.png');
3}

This code works as follows:

  • list-style-type: square: Sets the marker type to a square shape.
  • list-style-position: inside: The marker is displayed inside the list item.
  • list-style-image: url('path/to/image.png'): Uses an image as the marker.

Explanation of Individual Properties

list-style-type

list-style-type specifies the type of marker for the list. The styles available for use depend on the list type.

Example of value 
 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}
  • none: No marker is displayed.
  • disc (default): A small black circle.
  • circle: A small empty circle (ring).
  • square: A small square.
  • decimal: A numbered list like 1, 2, 3, ....
  • lower-alpha: Lowercase alphabet like a, b, c, ....
  • upper-alpha: Uppercase alphabet like A, B, C, ....
  • lower-roman: Lowercase Roman numerals like i, ii, iii, ....
  • upper-roman: Uppercase Roman numerals like I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

The list-style-position property specifies whether the marker (bullet) is placed outside or inside the list item. The list-style-position can have the following values:.

  • outside: Markers are placed outside the list item, and the item starts after the marker. This is the default value.
  • inside: Markers are placed inside the list item and displayed as part of the text.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

The list-style-image property is set when using an image as the list marker. The image is specified using url(), and if the image cannot be loaded, the marker specified by list-style-type is displayed.

list-style shorthand property 

1ul {
2    list-style: square inside url('bullet.png');
3}

The list-style property is a shorthand property that can set list-style-type, list-style-position, and list-style-image all at once. The order is flexible, but it is usually written like in this example. In this case, a square bullet is displayed inside the list item, and an image is displayed as a marker.

Summary

  • list-style is a shorthand property that allows you to specify the list appearance (marker type, position, custom image) all at once.
  • It is also possible to set list-style-type, list-style-position, list-style-image individually.
  • You can flexibly customize the list markers according to the layout and design.

CSS Counter (counter()) 

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

You can use CSS counters to automatically number list items or specific elements.

Creating and Initializing Counters 

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

You can create a counter and reset it with the counter-reset property.

Incrementing Counters 

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

You increment a counter with the counter-increment property and display the counter value with the counter function.

counters()

The counters function in CSS is very useful for managing custom counters, such as numbering list items or ordering paragraphs. This function can concatenate multiple counter values with a string and display it in CSS content. Here, we will explain in detail from the basic usage of the counters function to practical application examples.

Differences between counter and counters

Both counter and counters functions are used to display counter values, but they have the following differences.

  • counter: Retrieves the value of a single counter.
  • counters: Concatenates multiple counter values with a specified separator and displays them.

For example, if you want to use counters with nested list items, you can use the counters function to display them by concatenating the parent and child counters.

Syntax of the counters Function 

counters(<counter-name>, <string>);

The counters function is used with the following syntax.

  • <counter-name>: Specifies the name of the counter to use.
  • <string>: Specifies the string to be inserted between each counter (usually a separator like . or -).

Example of using the counters function

Next, let's look at an example using the counters function.

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}
  • In this example, the parent and child counters are concatenated for a two-level nested list.
    • The list-counter counter is being defined.
    • The counters function is used to concatenate and display the parent list counter and the child list counter.

Advanced example using multi-level counters

Using the counters function, you can flexibly manage multi-level counters such as custom numbering or paragraph numbering. For example, it is useful when creating documents that include chapters and sections.

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

In this code, counters for chapters (h1), sections (h2), and subsections (h3) are each reset, and the counters function is used to concatenate each level.

Summary

The counters function is very useful when you want to customize and display multiple counters hierarchically. By using CSS counters, you can freely customize the numbering of lists and headings, giving web pages an advanced informational structure.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS properties related to box model decorationTable-related CSS properties