javascript - 如何为我的段落添加行号？

Question

我正尝试在我的段落中添加行号，如屏幕截图所示，但我不知道如何操作。我应该使用什么？ CSS 还是 Javascript？谢谢!

Answer 1

您可以创建自定义计数器并使用 counter-increment: custom-counter+5 因此它会递增 5 但它会从 5 开始而不是从 1 开始，但是您可以先添加数字 1 p 与 :before 并将其从计数器中排除。

.content {
  width: 200px;
  counter-reset: custom-counter;
}
p {
  display: table;
}
p:not(:first-child):before {
  counter-increment: custom-counter+5;
  content: counter(custom-counter)". ";
  display: table-cell;
  color: #aaa;
}
p:first-child:before {
  display: table-cell;
  color: #aaa;
  content: '1. '
}

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, blanditiis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, eligendi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, minus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, repellendus?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, laboriosam.</p>
</div>