CODEWITHSUNDEEP
css
VladRia
VladRia

Reputation: 1587

Is there a way to display numbers in OL despite of "display: table" and "display: table-row"?

I'm trying to display nicely a code snippet. After processing by prettyfy js my code looks like:

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

I'd like to have a horisontal scrool bar in case of long line and alternation of colours:

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;
}

Is it still possible to show numbers of the <OL> ? Any other solution that keeps width of <li> equal ?

https://jsfiddle.net/pk5ph40L/

Thanks.

Upvotes: 1

Views: 182

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122057

You could use 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>

Upvotes: 6

Related Questions