How to add a title/label for a group of <LI>'s and shade them?

Issue

I maintain a page with nearly 100 list items that are constantly changing (items being added and removed). I'd like to group some of the list items together by shading them and having a label before them. An ideal solution would include:

1. The shading includes the bullet area
2. LI text is indented as normal (e.g., no list-style-inside)
3. Valid code
4. Easy to update (i.e., don't have to manually update all START attributes when items are added or removed)
5. Doesn't require Javascript

I don't think I can have all of these.

The following code works, but I either have to painstakingly update the "start" attribute in all the different 's, or else I have to use Javascript to number everything.

    ol {margin:0px}

    ol+p {background:silver; margin:0px; padding-left:5px; border-radius:9px 9px 0px 0px; }

    p+ol {background:gainsboro}

<ol>
<li>item 1</li>
<li>item 2</li>
</ol>

<p>Group</p>
<ol start=3>
<li>item 3</li>
<li>item 4</li>
</ol>

<ol start=5>
<li>item 5
<li>item 6
</ol>

Solution

* {
  margin: 0;
  line-height: 1.4;
  box-sizing: border-box;
}

.group {
  position: relative;
  padding-top: 1.5em;
  list-style-position: inside;
  margin-left: -1em;
}

.group::before {
  content: "Group";
  font-weight: bold;
  padding-left: 0.5em;
  position: absolute;
  display: block;
  top: 0;
  left: -1em;
  width: calc(100% - 0.5em);
  height: 1.5em;
  background-color: silver;
  border-radius: 5px 5px 0 0;
  z-index: -1;
}

.group::after {
  content: "";
  position: absolute;
  display: block;
  top: 1.5em;
  left: -1em;
  width: 100%;
  height: calc(100% - 1.5em);
  background-color: gainsboro;
  border-radius: 0px 0px 5px 5px;
  z-index: -1;
}

<ol>
  <li>item 1</li>
  <li>item 2</li>

  <div class="group">
    <li>item 3</li>
    <li>item 4</li>
  </div>

  <li>item 5
  <li>item 6
</ol>

I don't know how semantically correct it is but this gets the job done it seems.

Answered By - Servesh Chaturvedi