"display：table"と "display：table-row"にもかかわらず、OLに数字を表示する方法はありますか？

Question

私は素敵なコードスニペットを表示しようとしています。処理の後、私のコードは次のように見えます prettyfy jsによって：

<pre> 
    <ol> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ol> 
</pre> 

私は色の長蛇の列と交替した場合のhorisontal scroolバーを持っているしたいと思います：

pre { 
    border: 1px #555555 solid; 
    overflow-x: scroll; 
} 

ol { 
    display: table; 
} 

li { 
    display: table-row; 
} 

li:nth-child(even) { 
    background-color: #DDD; 
} 

li:nth-child(odd) { 
    background-color: #BBB; 
} 

を示すために、それはまだ可能です<OL>の番号？ <li>の幅を保持する他のソリューションはどれですか？

https://jsfiddle.net/pk5ph40L/

感謝。

Answer 1

あなたは使用することができCSS Counter

pre { 
 
    border: 1px #555555 solid; 
 
    overflow-x: scroll; 
 
} 
 
ol { 
 
    display: table; 
 
    padding: 0; 
 
    margin: 0; 
 
    counter-reset: tableCounter; 
 
} 
 
li { 
 
    display: table-row; 
 
} 
 
li:before { 
 
    counter-increment: tableCounter;    
 
    content: counter(tableCounter) ". "; 
 
} 
 
li:nth-child(even) { 
 
    background-color: #DDD; 
 
} 
 
li:nth-child(odd) { 
 
    background-color: #BBB; 
 
}

<pre> 
 
    <ol> 
 
    <li>Cascading Style Sheets (CSS)</li> 
 
    <li>is a style sheet language used for describing the presentation of a document written in a markup language.</li> 
 
    <li>Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML</li> 
 
    <li>the language can be applied</li> 
 
    <li>to any XML</li> 
 
    </ol> 
 
</pre>