Как задать вопросы с помощью класса в CSS

Question

Я создал список вопросов и планирую добавить в будущем. Я хочу задать вопросы, используя CSS , например, каждый вопрос находится в разделе, приведенном ниже.

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

Есть ли способ их автоматического номера, используя класс «вопрос»?

Answer 1

Да, вы можете с: прежде, чем псевдо-элементов и CSS счетчики:

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>

Вы можете прочитать больше о счетчиках CSS в https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters и http://www.w3.org/TR/CSS2/generate.html#generate.html#counters