Creating a counter for a list using CSS

Question

Creating a counter for a list using CSS

I am attempting to utilize the counter increment feature in CSS for my ordered list, but it doesn't seem to be functioning properly.

Here is the desired format I want to achieve:

1. Acknowledgements
   1.1 blah, blah ....
   1.2 blah, blah ....
   1.3 blah, blah ....

2. Risk Statement
   2.1 blah, blah ....
   2.2 blah, blah ....
   2.3 blah, blah ....

3. License
   3.1 blah, blah ....
   3.2 blah, blah ....
   3.3 blah, blah ....

However, this is the current output... http://jsfiddle.net/XQKcy/

html css

Answer 1

Answer №1

Check out this JSFiddle demo!

You were almost there:

body {
    counter-reset: listCounter;
}
ol {
    counter-increment: listCounter;
    counter-reset: itemCounter;
    list-style:none;
}
li{
    counter-increment: itemCounter;
}
li:before {
    content: counter(listCounter) "." counter(itemCounter);
    left:10px;
    position:absolute;
}

Answer 2

Check out this JSFiddle demo!

You were almost there:

body {
    counter-reset: listCounter;
}
ol {
    counter-increment: listCounter;
    counter-reset: itemCounter;
    list-style:none;
}
li{
    counter-increment: itemCounter;
}
li:before {
    content: counter(listCounter) "." counter(itemCounter);
    left:10px;
    position:absolute;
}

Creating a counter for a list using CSS

Answer №1

Check out this JSFiddle demo!

Similar questions

Achieving bottom alignment for an element within a flex item: steps for success

Begin the div at a width of 0 pixels and expand it towards the right

Looking for a solution to organize the dynamically generated list items in an HTML page

What is the best way to execute a function in JavaScript and have it return the output as an image

The many potentials of looping through Sass maps

Using only CSS to swap out periods in OL>LI elements for a different style

When the mouse hovers over, include a fade-in effect for the image

Displaying an iFrame with a height that excludes the header section

Another date selection option missing from the available choices

Is there a way to encase numerous <tbody> elements together?

Combining Various Template Variables into a Single Variable in Django

React Transition for Mui Menu

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?

Navigate the div with arrow keys

Send an array of data from the view to the Controller in CodeIgniter

Creating a Masonry Slider with varying heights and widths of images is a simple and effective way to showcase diverse content in a visually

Utilize preg_replace to insert your own website ahead of each hyperlink

Customizing the appearance of selection dropdown options in React

Image that adjusts its size according to the device screen width while

Transferring a variable between a JavaScript function and a Java class