Места серийный номер рядом

Question

Я занимаюсь разработкой веб-приложением, которое имеет вопросы и я должен поставить номера вопроса рядом вопросы Формат должен быть как этот

Q10. - - - - - - - - 
    - - - - - - - - 
    - - - - - - - - 

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

.question { 
    margin-left: 3em; 
    position: relative; 
} 
.question::before { 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

Answer 1

Что касается ответа @ dfsq, я думаю, что более подходящий вариант, хотя использование подобной структуры будет использовать data-attributes.

.question { 
 
    margin-left: 3em; 
 
    position: relative; 
 
} 
 
.question::before { 
 
    content: "Q" attr(data-question); 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    margin-left: -2em; 
 
}

<p class="question" data-question="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sit iste dolore commodi facere atque ab aut ratione repudiandae assumenda porro animi autem molestiae. Optio eaque perferendis quod inventore eius nobis aspernatur facilis quo voluptate.</p> 
 

 
<p class="question" data-question="11">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sit iste dolore commodi facere atque ab aut ratione repudiandae assumenda porro animi autem molestiae. Optio eaque perferendis quod inventore eius nobis aspernatur facilis quo voluptate.</p>

Это похоже, чтобы другой ответ в том, что он полагается на «ручной» значения, находящегося в HTML, но он не полагается на <style> тегов. Очень похожая методология.

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

Answer 2

выглядит как хорошее применение для CSS counters. Проверьте это, как вы можете использовать его даже с настраиваемым начальным значением:

.questions { 
 
    counter-reset: section; 
 
    list-style-type: none; 
 
} 
 
.questions li:before { 
 
    counter-increment: section; 
 
    content: "Q" counter(section) "."; 
 
    position: absolute; 
 
    margin-left: -30px; 
 
}

<ol class="questions" style="counter-reset: section 3"> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam perspiciatis tempore velit voluptatibus cumque ex necessitatibus officiis excepturi nisi neque possimus dolorum nostrum voluptate nesciunt nobis iusto porro laboriosam!</li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis nulla saepe dicta tedebitis! Aliquam ad similique enim!</li> 
 
    <li>Question #3</li> 
 
    <li>Question #4</li> 
 
</ol>

Обратите внимание, что я поставил style атрибут на ol, потому что вы «должен динамически размещать номера вопроса» ,