如何在 html/css 有序列表中使用列表项的块子元素使项目编号具有自适应性？

Question

Targets

1. Make ordered list as custom as :before pseudo element styling allowed (AFAIK arbitrary shape is impossible).
2. The spacing between container content edge (even with border when left padding is 0 ) and item number (designated as l ) also between number and item (designated as m ) must be adjustable.
3. The item number with must be adaptive due to increasing digits count.

4. li could has children block elements as div , p , figure , etc.

Problem

Below solution without positioning satisfies to first three requirements.

ol {
  counter-reset: section;
}
ol li:before {
  content: "";
  display: inline-block;
  counter-increment: section;
  content: counters(section, ".") " ";
  margin-left: 4px;
  margin-right: 10px;
  padding: 4px 6px;
  background: lightblue;
  border: 1px solid skyblue;
  border-radius: 4px;
}
ol + li {
  margin-top: 6px;
}

Fiddle

But what about fourth requirement? Let's try to add child elements to li :

<ol>
  <li>Alpha</li>
  <li>
    <ol>
      <li>
        <p>Lorem ipsum</p>
        <p>Duis aute</p>
      </li>
    </ol>
  </li>
</ol>

Conceptually, :before pseudo element must take the one column (space below it must be empty until next li ). Currently, I know just one solution: positioning.

ol {
  counter-reset: section;
}
ol li {
  position: relative;
}
ol li:before {
  position: absolute;
  left: 0;
  counter-increment: section;
  content: counters(section, ".") " ";
  display: inline-block;
  padding: 4px 6px;
  background: lightblue;
  border: 1px solid skyblue;
  border-radius: 4px;
}
ol li + li {
  margin-top: 12px;
}
ol li > li {
  padding-left: 30px;
}
ol li > li > ol > li {
  padding-left: 44px;
}

Fillde

In addition to ugliness, this solution reaches just first and fourth target:

• Second target We can not control neither l not m anymore: we can control just total spacing l + m + o .
• Third target No adaptivity: the l + m + o is actual only for initial digits count.

For the fouth target, vertical spacing adjusting is required, but it no too hard.

Could you suggest some alternative solutions? Does CSS flexibility ends here?

Answer 1

Here is an idea using CSS grid where I will tweak your initial code a little:

 ol { counter-reset: section; list-style:none; margin:0; padding:0; } ol li { display:grid; /* added this */ grid-template-columns:auto 1fr; /* auto for the bullet and 1fr for the content*/ align-items:baseline; /* keep all the text aligned */ } ol li:before { content: ""; /* make sure the bullet span many rows os it's kept on the first column and the content will placed on the second column */ grid-row:span 1000; counter-increment: section; content: counters(section, ".") " "; margin-left: 4px; margin-bottom:3px; margin-right: 10px; padding: 4px 6px; background: lightblue; border: 1px solid skyblue; border-radius: 4px; } ol + li { margin-top: 6px; }

 <ol> <li>Alpha</li> <li> <ol> <p>Something</p> <li> <p>Lorem ipsum</p> <p>Duis aute</p> </li> </ol> </li> <li>Charlie</li> <li>Delta</li> <li>Echo</li> <li>Foxtrotg</li> <li>Golf</li> <li>Hotel</li> <li>India</li> <li>Juliet</li> </ol>

Or like below:

 ol { counter-reset: section; list-style:none; margin:0; padding:0; } ol li { display:grid; /* added this */ grid-template-columns:auto 1fr; /* auto for the bullet and 1fr for the content*/ align-items:baseline; /* keep all the text aligned */ } ol li > * { grid-column:2; /* all the content in the second column and keep only the bullet in the first*/ } ol li:before { content: ""; counter-increment: section; content: counters(section, ".") " "; margin-left: 4px; margin-bottom:3px; margin-right: 10px; padding: 4px 6px; background: lightblue; border: 1px solid skyblue; border-radius: 4px; } ol + li { margin-top: 6px; }

 <ol> <li>Alpha</li> <li> <ol> <p>Something</p> <li> <p>Lorem ipsum</p> <p>Duis aute</p> </li> </ol> </li> <li>Charlie</li> <li>Delta</li> <li>Echo</li> <li>Foxtrotg</li> <li>Golf</li> <li>Hotel</li> <li>India</li> <li>Juliet</li> </ol>