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/

htmlcss

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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Presenting a data table in Angular

I'm new to using Angular and need help creating a table to organize my data, which is being fetched from a JSON file on the server. Here's the content of data.component.html: <div class="container"> <h1>Search history</h1> ...

htmlangularangular-material

Does Xamarin.Forms have a feature similar to html datalist that enables the selection of predefined values while also allowing for the input of free text?

We are currently developing a Xamarin forms application. One of the necessary features is a selection field where users can either choose from predefined options or enter their own text value, similar to using a text field. In HTML, this could be easily ...

androidhtmliosxamarin.formscontrols

Exploring the semantic-ui dropdown menu feature in Chrome

When I first started learning to code with semantic-ui framework, I noticed a difference in behavior in Chrome compared to other browsers. The pointing menu on the left element (such as the search box) breaks down in Chrome, whereas it displays correctly i ...

htmlcssgoogle-chromemenusemantic-ui

Issue with text input field causing the Enter key to not create a new line

In the example above, the text is placed in the middle of the text area. Here is the CSS code : .form-control { height: 300px; display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-heig ...

javascriptcssreactjs

Changing the color of Material UI pagination: a step-by-step guide

I have integrated Material UI to create a pagination bar for my website. While everything is functioning properly, I am looking to personalize the appearance. After reviewing their documentation, I tried implementing a theme but encountered an issue with c ...

cssreactjsmaterial-ui

Enhance the appearance of the <td> <span> element by incorporating a transition effect when modifying the text

I need help with creating a transition effect for a span element within a table cell. Currently, when a user clicks on the text, it changes from truncated to full size abruptly. I want to achieve a smooth growing/scaling effect instead. You can view an exa ...

javascripthtmljquerycss

Is there anyone who can assist in refining the padding and margin issues within this Galleria.js implementation?

I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...

jquerycssslideshow

Struggling with converting my menu design into a dropdown menu

Recently completed creating my initial menu with a left navigation bar design. Wondering if it is achievable to implement a dropdown effect on hover without the use of javascript? I have come across several solutions but they do not seem to work for me, po ...

htmlcssmenu

Switching Over to Burger Menu

I created a burger menu using HTML, CSS, and jQuery that switches from a full-width menu to a burger menu. However, I'm facing an issue with toggling the dropdown when the menu collapses. Here's my code: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlcssmenu

How can I create a tooltip or something similar for an HTML input field?

Seeking a solution for adding additional information to an HTML input field while typing or hovering over it. Attempted the following code snippet: <input type="text" onmouseover="window.status='hello world'; return true;" name="TextInput" ta ...

html

Utilizing React Refs to Retrieve Value from HTML Select Element

I am currently working on a form that includes the use of an HTML select element. <select className="form-control" id="ntype" required > <option value = "">None</option> <option value = "1">1</option> < ...

javascripthtmlreactjs

PHP line breaks are not functioning as expected

I am having trouble formatting the email with line breaks to display as: Name: Email: Message: I attempted adding \r\n but it had no effect. Then I tried including $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n ...

phphtml

Sidebar Masonry - Use Bootstrap for a Unique Layout

My goal is to have the page divided into 4 rows, with Masonry aligning the posts within 3 rows and a sidebar displayed on the right. However, I am facing an issue where Masonry mixes everything up and does not allow me to have a sidebar at the right. HTML ...

jqueryhtmltwitter-bootstrapjquery-masonrymasonry

What is causing my animation to jump when using the Web Animation API reverse() function?

I've come across various sources stating that when you call reverse() while an animation is playing, it should have the same effect as setting playbackRate to -1. However, in my case, using reverse() makes my animation behave erratically and jump arou ...

javascriptcssweb-animations

"Interactive feature allowing users to edit and view the most recently inserted HTML

My approach involves using a contenteditable div as an input field for entering text and inserting icons through a button that adds small HTML pictures within the text. Everything works fine when the text is narrower than the contenteditable field. Howev ...

jqueryhtmlcsscontenteditable

Choose the value of the adjacent text input with jQuery

I am working with dynamic checkboxes and corresponding text inputs. My goal is to alert the value of the text input when a checkbox is checked. However, I am having trouble retrieving the correct value of the text input associated with each checkbox. Addit ...

jqueryhtmldom

Ensuring one div remains in a fixed position relative to another div

I'm struggling to keep my two white divs aligned in relation to the black div in the center. They need to maintain the same distance from the black div even when the page is resized. #halvfjerds { width: 100%; height: 1050px; background-color ...

htmlcss

Creating a continuous loop animation with CSS hover state

This piece of code creates an interesting effect when the text is hovered over. The slight shakiness adds a cool touch to it. However, this effect only occurs when the mouse is moved slowly; if the mouse remains stationary, the hover style takes precedence ...

jqueryhtmlcss

Navigating to a randomly generated ID in Firestore using Vue - A Step-by-Step Guide

My app uses Firestore as a backend for posts. On the screen displaying all categories, when a new category is created it's added to the list. When a category is clicked, I use its id as a parameter to navigate to that specific category and show the po ...

javascripthtmlvue.jsgoogle-cloud-firestorevue-router

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

javascripthtmlcss