Numbering lines in a paragraph CSS & HTML

Question

I'm attempting to make a code-like style for content that is responsive to different window sizes. I want to number lines of a paragraph using purely CSS, but I haven't been able to figure out how. I'm certain there must be some way given all of the cool and amazing things I've seen with pure CSS lately.

Here is what I have so far, but it obviously only numbers the paragraphs.

p:before {
    counter-increment: para;
    content: counter(para);
    margin-right: 7px;
}

Fiddle for forking: https://jsfiddle.net/joshuarlowry/tsbza4j6/

Ideas...

• Maybe it is possible to fake it by creating a ::before that is the same height of the paragraph (somehow) and counts up until the bottom.
• Maybe it is possible to somehow turn paragraphs into individual <span> for each line dynamically based on the area and count normally off of those.
• Maybe we can style room to the left of the paragraph and draw the count there some other way.

Here is some sample content for reference. I do not control the formatting.

<p>
Cupcake ipsum dolor sit amet pie tart. Brownie pudding lemon drops fruitcake pastry jelly-o cake macaroon cookie. Dessert wafer biscuit cookie gummies sweet carrot cake. Dragée fruitcake I love marzipan gingerbread sugar plum. I love brownie oat cake I love toffee chocolate jelly marzipan. Jelly beans powder gummies chocolate powder caramels powder sweet. Chocolate cake carrot cake I love. Sugar plum gummi bears chocolate bar dragée carrot cake bear claw apple pie chocolate cake topping. I love candy canes bonbon sweet tart jelly beans caramels dragée. Gingerbread I love dragée muffin chupa chups I love toffee sweet I love. Jelly-o toffee danish powder gingerbread I love I love bear claw. I love dragée jujubes I love oat cake. Pie chocolate bar cotton candy. Macaroon fruitcake jujubes danish candy canes lemon drops I love sesame snaps.
</p>
<p>
Pastry cotton candy tiramisu bonbon powder gummi bears cotton candy. Biscuit jelly powder I love cheesecake pudding topping. Cheesecake lollipop dessert pastry marshmallow icing cotton candy halvah chocolate. Donut brownie lollipop jelly-o jujubes jelly-o. Liquorice pie cake toffee cake. Icing pastry pie gingerbread cupcake chocolate cake. I love cookie cake croissant marzipan jelly beans cupcake cheesecake marshmallow. Chocolate cake apple pie chupa chups chocolate cake candy canes biscuit I love cookie sweet. Cotton candy caramels topping sweet roll muffin. Gingerbread cake icing pastry pudding fruitcake lollipop halvah I love. Tiramisu tootsie roll macaroon liquorice. Toffee marzipan macaroon toffee jelly-o cupcake pastry gummies ice cream. Jelly candy canes sweet roll lollipop.
</p>

Text from Cupcake Ipsum: http://www.cupcakeipsum.com/

Answer 1

You need to wrap p tags in a wrapper and using counter-icreament, you can achieve this

.wrapper {
  counter-reset: my-awesome-counter;
}
p {
  counter-increment: my-awesome-counter;
}
p:before {
   content: counter(my-awesome-counter);
   margin-right: 7px;
}

    <div class="wrapper">
    
    
    <p>
    Cupcake ipsum dolor sit amet pie tart. Brownie pudding lemon drops fruitcake pastry jelly-o cake macaroon cookie. Dessert wafer biscuit cookie gummies sweet carrot cake. Dragée fruitcake I love marzipan gingerbread sugar plum. I love brownie oat cake I love toffee chocolate jelly marzipan. Jelly beans powder gummies chocolate powder caramels powder sweet. Chocolate cake carrot cake I love. Sugar plum gummi bears chocolate bar dragée carrot cake bear claw apple pie chocolate cake topping. I love candy canes bonbon sweet tart jelly beans caramels dragée. Gingerbread I love dragée muffin chupa chups I love toffee sweet I love. Jelly-o toffee danish powder gingerbread I love I love bear claw. I love dragée jujubes I love oat cake. Pie chocolate bar cotton candy. Macaroon fruitcake jujubes danish candy canes lemon drops I love sesame snaps.
    </p>
    <p>
    Pastry cotton candy tiramisu bonbon powder gummi bears cotton candy. Biscuit jelly powder I love cheesecake pudding topping. Cheesecake lollipop dessert pastry marshmallow icing cotton candy halvah chocolate. Donut brownie lollipop jelly-o jujubes jelly-o. Liquorice pie cake toffee cake. Icing pastry pie gingerbread cupcake chocolate cake. I love cookie cake croissant marzipan jelly beans cupcake cheesecake marshmallow. Chocolate cake apple pie chupa chups chocolate cake candy canes biscuit I love cookie sweet. Cotton candy caramels topping sweet roll muffin. Gingerbread cake icing pastry pudding fruitcake lollipop halvah I love. Tiramisu tootsie roll macaroon liquorice. Toffee marzipan macaroon toffee jelly-o cupcake pastry gummies ice cream. Jelly candy canes sweet roll lollipop.
    </p>
    </div>

Working fiddle here

Answer 2

A text editor assigns a unique line number to each line as denoted by a carriage return. If the text simply wraps onto multiple lines, it will still only be assigned a single line number.

With that in mind, and given that you're working with HTML, the carriage return would instead be represented by a <br> element.

Thus, the following code will find all <p> elements, split their content on <br> elements, and wrap the resulting lines in <span> elements.

Array.prototype.slice.call(document.querySelectorAll('p'))
  .forEach((p) => {
    p.innerHTML = p.innerHTML.split('<br>')
      .map((l) => `<span>${l.trim()}</span>`)
      .join('');
  });

body {
  counter-reset: p;
}

p {
  margin: 0;
  padding-left: 40px;
}

p > span {
  display: block;
  margin-bottom: 5px;
  position: relative;
}

p > span::before {
  counter-increment: p;
  content: counter(p) ".";
  left: -30px;
  position: absolute;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit<br>
  Dolores, nobis repellendus, molestias aperiam aspernatur praesentium, perferendis inventore unde ducimus ab excepturi<br>
  Sunt illum magni necessitatibus ad similique est tenetur. Facere.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis voluptatum assumenda dolorem vero soluta commodi maiores temporibus.
</p>