Can you create an ordered list wityhout list items?

Question

I have a markup that looks like this, all items are numbered based on their position. Can you create something like this automatically based on the number of items? Either with css or HTML, I know it's possible with javascript. Ideally I'd like it to write out 01.01, 01.02 etc but if it's possible to do with just one layer, that's ok too.

   <section class="profile__section">
    <h1 class="profile__section__header">01. Colors</h1>
    <div class="container__profile__subsection">
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.01 Blue</h2>
            <p class="profile__subsection__color" style="background: #36314C;">Hex: 36314C</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.07 Topics Blue</h2>
            <p class="profile__subsection__color" style="background: #4A455D;">Hex: 4A455D</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.02 White</h2>
            <p class="profile__subsection__color" style="background: #fff; color: black;">Hex: FFFFFF</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.03 Places Yellow</h2>
            <p class="profile__subsection__color" style="background: #F4BA38;">Hex: F4BA38</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.04 Tag Blue</h2>
            <p class="profile__subsection__color" style="background: #347591;">Hex: 347591</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.05 Tag Blue Light</h2>
            <p class="profile__subsection__color" style="background: #d7e2e2;">Hex: d7e2e2</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">01.06 Time Blue</h2>
            <p class="profile__subsection__color" style="background: #147562;">Hex: 147562</p>
        </div>
    </div>
</section>
<section class="profile__section">
    <h1 class="profile__section__header">02. Cartegory Colors</h1>
    <div class="container__profile__subsection">
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.01 People Green</h2>
            <p class="profile__subsection__color" style="background: #7CB93C;">Hex: 7CB93C</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.02 Comms Pink</h2>
            <p class="profile__subsection__color" style="background: #D53668;">Hex: D53668</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.03 Photos Purple</h2>
            <p class="profile__subsection__color" style="background: #993B9B;">Hex: 993B9B</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.04 Event orange</h2>
            <p class="profile__subsection__color" style="background: #EA5B1D;">Hex: EA5B1D</p>
        </div>
        <div class="profile__subsection">
            <h2 class="profile__subsection__header">02.05 Docs blue</h2>
            <p class="profile__subsection__color" style="background: #54BBB6;">Hex: 54BBB6</p>
        </div>
    </div>
</section>

Answer 1

With CSS you actually really can order HTML elements. Not by element value thought. See the CSS order property on W3Schools - CSS order

Below the extracted snipped from W3Schools

#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    width: 70px;
    height: 70px;
}

/* Safari 6.1+ */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 2;}
div#myBlueDIV  {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 1;}

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

<p><b>Note:</b> Internet Explorer 10 and earlier versions do not support the order property.</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-order property.</p>

Answer 2

Similair to an ordered list, the numbers I want to add is not a part of the content, and I need to move the content around and want the content to follow. Here is my solution:

body {
    counter-reset: section;
}

.profile__section__header::before{
    counter-increment: section;
    content: counter(section, decimal-leading-zero) ". ";
}

.profile__subsection__header::before{
    counter-increment: subsection;
    content: counter(section, decimal-leading-zero) "." counter(subsection, decimal-leading-zero) " ";
}