A paragraph styled with line numbers using CSS

Question

A paragraph styled with line numbers using CSS

I struggle with writing long, never-ending paragraphs and need a way to visually break them up by adding line numbers next to each paragraph. While I'd prefer a solution using only CSS for simplicity's sake, JavaScript works too since this is just for personal use. Unfortunately, I can't wrap each line in its own tag because the document is constantly changing. If possible, it would be great if every 5th line could be numbered as well. I hope this explanation makes sense; let me know if you need further clarification.

(By the way, how long do you think a paragraph should be before it becomes too lengthy?)

EDIT: After receiving some feedback and realizing my previous message was confusing, allow me to try again. Imagine I have two paragraphs - one that spans ten lines of text and another that is only three lines. For the first paragraph, I'd like each line to be numbered from 1 to 10, and for the second paragraph, I want the numbering to go from 1 to 3. Does that make more sense now?

javascript html css

Answer 1

Answer №1

Uncertain about what specifically you are seeking

If your goal is to add numbers to p tags using css, you can achieve it with css-counters

Take a look at this code snippet

.container {
  counter-reset: pcount;
}
p::before {
  content: counter(pcount) "):";
  counter-increment: pcount;
}

<div class="container">
  <p>This is p</p>
  <p>This is p</p>
  <p>This is p</p>
  <p>This is p >This is p >This is p >This is p >This is p >This is p >This is p >This is p >This is p</p>
  <p>This is p</p>
</div>

Hope this information proves helpful

Answer 2

Uncertain about what specifically you are seeking

If your goal is to add numbers to p tags using css, you can achieve it with css-counters

Take a look at this code snippet

.container {
  counter-reset: pcount;
}
p::before {
  content: counter(pcount) "):";
  counter-increment: pcount;
}

<div class="container">
  <p>This is p</p>
  <p>This is p</p>
  <p>This is p</p>
  <p>This is p >This is p >This is p >This is p >This is p >This is p >This is p >This is p >This is p</p>
  <p>This is p</p>
</div>

Hope this information proves helpful

A paragraph styled with line numbers using CSS

Answer №1

Similar questions

flexbox: Two vertical icons tightly aligned without any space

Is it possible to use an angular expression as the ng-click function?

"Troubleshooting a callback problem in jQuery involving JavaScript and AJAX

Stopping the timer with clearInterval isn't functioning as expected

The mobile responsive view in Chrome DevTools is displaying incorrect dimensions

The value stored in $_POST['valuename'] is not being retrieved

The Bootstrap navigation bar is refusing to collapse

Organizing an angular expansion panel

Horizontal representation of data utilizing PHP and MySQL

Verifying the Redux saga test plan's functionality by testing a reducer with a specific state branch

How can we show pictures when a user clicks?

Tips for transferring values from two separate select tags for processing via Ajax and jQuery

Facing issues with Typescript imports for validatorjs?

Run several asynchronous HTTP requests in the background within a Chrome extension

Guide to making a dynamic image map with interactive links using HTML and CSS

In React's contextApi, the this.context object is constantly devoid of any values

I'm confused why this particular method within a class is not being inherited by the next class. Rather than seeing the expected extension, I am presented with - [Function (

Incorporate the <li> components into a search bar and ensure that the parent div element does not experience overflowing

"multer's single file upload functionality is not functioning properly, but the array upload

How can I use Beautiful Soup to change the value of a dropdown button to match the selected dropdown