CODEWITHSUNDEEP
htmlcsshtml-lists
Greg
Greg

Reputation: 1

Custom Ordered List Content

I'm hoping to mimic the ordered list formatting that I see in legislative statutes. One peculiarity is that you will sometimes see list such as this:

(a) yadda
(b) yadda
(b-1) yadda
(b-2) yadda
(c) yadda
(d) yadda

Upvotes: 0

Views: 53

Answers (2)

Jordi Ruiz
Jordi Ruiz

Reputation: 487

To create an ordered list in HTML you have to use the tags <ol> to specified a ordered list and every item should be a <li> "list item". 

<ol>
  <li>yadda</li>
  <li>yadda</li>
  <li>
    <ol>
      <li>yadda</li>
      <li>yadda</li>
    </ol>
  </li>
  <li>yadda</li>
</ol>

Please see an example here:

https://jsfiddle.net/jruizx/pcs2mh4j/

You can have a look at this question:

Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?

Upvotes: 0

dippas
dippas

Reputation: 60553

you can use pseudo-element ::before and CSS counters

ul {
  counter-reset: list, list2, list3;
}
li {
  list-style: none;
  counter-increment: list;
}
li::before {
  content: "(" counter(list, lower-alpha)")";
  position: relative;
  left: -5px
}
li:nth-child(3) {
  counter-increment: list2 2
}
li:nth-last-child(2) {
  counter-increment: list3 3
}

li:nth-child(3)::before {
  content: "(" counter(list2, lower-alpha)"-1)";
}
li:nth-child(4)::before {
  content: "(" counter(list2, lower-alpha)"-2)";
}
<ul>
  <li>Some text here</li>
  <li>Some more text here..</li>
  <li>Oh yeah, here's some pretty text</li>
  <li>Some text here</li>
  <li>Some more text here..</li>
  <li>Oh yeah, here's some pretty text</li>
</ul>

Upvotes: 1

Related Questions