Namit Juneja Namit Juneja - 5 months ago 15
CSS Question

Place serial number beside

I am developing a web app which has questions and i have to place question numbers beside the questions
The format is supposed to be like this

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


I have tried to make it an ordered list but that doesn't work because I have to dynamically place question numbers

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

Answer

With respect to @dfsq's answer I think a more appropriate option, although using similar structure would be the use of 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>

This is similar in to the other answer in that it does rely on a 'manual' value being in the HTML but it doesn't rely on <style> tags. Very similar methodology.

Whether data-attributes are more accessible to JS is arguable of course, but I throw this out as another option.