how to number questions using class in CSS


Tags: html,css,css-counter

Problem :

I have created a list of questions and plan to add more in the future. I want to number the questions using CSS for example each question is in a section as given below.

<section class = "question">The Question</section>

Is there any way to number them automatically using the "question" class ??



Solution :

Yes, you can with the :before pseudo-element and CSS counters:

body {
  counter-reset: section;                   /* Set the section counter to 0 */
}
section.question::before {
  counter-increment: section;               /* Increment the section counter*/
  content:  counter(section) ": "; /* Display the counter */
}
<section class="question">The Question</section>
<section class="question">The Question</section>
<section class="question">The Question</section>
<section class="question">The Question</section>

You can read more about CSS counters at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters and http://www.w3.org/TR/CSS2/generate.html#generate.html#counters


    CSS Howto..

    How do I set the background-image property to a linear gradient using jQuery's css method?

    How to create a custom shape - css

    How to use Open Sans font with cakePhp 3?

    how to avoid firefox to add overlay color on image click?

    How to Change Style of Parent
  • on Hover
  • How to achieve this view?

    How do I change the z-index of a div when the user mouses over it?

    How to skip first N elements with CSS or jQuery?

    How to make whole table cell clickable but vertical align text inside it - CSS

    CSS: How to select elements by referencing the parent, not the child

    how to make a div transparent without affecting the child in CSS 3?

    How to display fieldset text and button inline on small screens?

    How to animate image swap on hover

    how to set the font-family like a digital clock CSS? [closed]

    How to make a div fade on hover?

    How to disable correctly CSS3 transition property when needed

    How to Center-Justify links in CSS?

    How to apply a css rule based on the number of siblings an element has? [duplicate]

    How to embed link HTML into CSS file for menus?

    CSS - How to align drop-down sub menu to the parent's right?

    How to force an empty page in a paged HTML document?

    How to rotate an element and correctly position it with CSS or jQuery

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How can I give seperate margin to individual control and also keeping same style in CSS for all of them HTML5 [closed]

    How to use CSS absolute position inside a scrollable div element

    How to remove the arrows in a scroll bar through CSS

    CSS: How can I force a display: table-cell box to have a fixed width of 50%?

    How can you print a page that has been altered by javascript?

    How to set size of font with CSS without using - hyphen?

    How to format my form with CSS?