CODEWITHSUNDEEP
css
Himmators
Himmators

Reputation: 15016

Placing the :before-value in the same way as a list-item is placed?

I'm using counters to setup a special type of counting of lists, it's for a legal form.

li{
    list-style: none;
}

>ol {
    counter-reset: mainlist;
}

>ol>li{
    counter-reset: sublist;
}

>ol>li:before{
    counter-increment: mainlist;
    content: counter(mainlist) ". ";
}

>ol>li>ol>li:before{
    counter-increment: sublist;
    content: counter(mainlist) "." counter(sublist) " ";
}

This works fine, but I want the numbering to be to the left of the text column, not the way it looks now.

1.1
this is how it looks now


1.1 this is how it looks if I add inline
next row will start here.


1.1 I want it to look this.
    the next row starts here 
    and it's a lot easier to find the numbers

I tried using text-indent aswell, but it didn't work because the width of the different letters are different.

Upvotes: 0

Views: 39

Answers (2)

Temani Afif
Temani Afif

Reputation: 273483

An easy solution is to add display:flex to the li and you get this layout:

body {
  width: 200px;
}

li {
  list-style: none;
}

ol {
  counter-reset: mainlist;
}

ol>li {
  counter-reset: sublist;
}

ol>li:before {
  counter-increment: mainlist;
  content: counter(mainlist) ". ";
}

ol>li>ol>li {
  display: flex;
}

ol>li>ol>li:before {
  counter-increment: sublist;
  content: counter(mainlist) "." counter(sublist) " ";
  margin-right:5px;
}
<ol>
  <li>aaaaaa</li>
  <li>bbbbbbb 
    <ol>
      <li>aaaaaa aaaaaa aaaaaa </li>
      <li>bbbbbbb bbbbbbb bbbbbbb</li>
    </ol>
  </li>
</ol>

And if you want this behavior to be on the parent li, you need to use flex on parent li also with some HTML/CSS adjustement:

body {
  width: 200px;
  counter-reset: mainlist;
  counter-reset: sublist;
}

li {
  list-style: none;
}

ol>li {
  display: flex;
  flex-wrap: wrap;
}

ol>li>span {
  flex: 1;
}

ol>li>ol {
  flex: 100%;
}

ol > li:before {
  counter-increment: mainlist;
  content: counter(mainlist) ". ";
  margin-right: 5px;
}

ol>li>ol>li {
  display: flex;
  flex-wrap: nowrap;
}

ol > li > ol > li:before {
  counter-increment: sublist;
  content: counter(mainlist) "." counter(sublist) " ";
  margin-right: 5px;
}
<ol>
  <li><span>aaaaaa</span></li>
  <li><span>bbbbbbb bbbbbbb bbbbbbb</span>
    <ol>
      <li>aaaaaa aaaaaa aaaaaa </li>
      <li>bbbbbbb bbbbbbb bbbbbbb</li>
    </ol>
  </li>
  <li><span>bbbbbbb bbbbbbb bbbbbbb</span>
</ol>

Upvotes: 1

Curt Husting
Curt Husting

Reputation: 248

You can use the build in css table-layout by adding display: table-row; to the li and display: table-cell; to the li:before

The benefit of table cell is the cells will expand all the same no matter how large the number gets, i.e.

  1.1 This will line up with
1.125 This

Example

body {
    counter-reset: mainlist;
    counter-reset: sublist;
}

li{
    list-style: none;
    display: table-row;
}

ol>li:before{
    counter-increment: mainlist;
    content: counter(mainlist) ". ";
    display: table-cell;
    text-align: right;
    padding-right: 6px;
}

ol>li>ol>li:before{
    counter-increment: sublist;
    content: counter(mainlist) "." counter(sublist) " ";
}
<ol>
  <li>
    First Section
    <ol>
      <li>I want it to look this. the next row starts here and it's a lot easier to find the numbers</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Upvotes: 0

Related Questions