段落に段落番号を追加するにはどうすればよいですか？

Question

私は段落に行番号を追加しようとしています（スクリーンショットに表示されているように）。私は何を使うべきですか？ CSSまたはJavascript？ありがとうございました！

Answer 1

カスタムカウンタを作成して、それが5ずつ増加しますが、それは5からではない1から始まりますが、あなたが:beforeで最初pの番号1を追加し、カウンターからそれを除外することができcounter-increment: custom-counter+5を使用することができます。

.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>

Answer 2

あなたはそれを達成するためにCSS3カウンタを使用することができます。セクションが段落であると仮定します。

body { 
    counter-reset: section; 
} 

p::before { 
    counter-increment: section; 
    content: counter(section); 
} 

referenceを参照してください。

Answer 3

私はあなたが行をあらかじめ区切りたくないと仮定しています。つまり、ブラウザが行区切りを自動的に追加するようにします。

段落の隣に2番目の列/ divを追加し、段落番号を入力することができます。同じ線高さを使用して、位置がずれないようにしてください。

一方、@ LGSonのソリューションとlining.jsライブラリに基づいて、単一行にアクセスすることができます。