<section>
	<span class="toc-title">Table of Contents</span>
	<div id="toc">
		<details class="nav sidenav">
			<summary>
				<a class="toc__link" href="#content-numbering-system">Content Numbering System</a>
			</summary>
			<details class="nav">
				<summary>
					<a class="toc__link" href="#content-numbering-system-dummy-header-2">Dummy Header 2</a>
				</summary>
				<a class="toc__link" href="#content-numbering-system-dummy-header-2-dummy-header-3">Dummy Header 3</a>
				<details class="nav">
					<summary>
						<a class="toc__link" href="#content-numbering-system-dummy-header-2-dummy-header-3-1">Dummy Header 3</a>
					</summary>
					<a class="toc__link" href="#content-numbering-system-dummy-header-2-dummy-header-3-1-dummy-header-4">Dummy Header 4</a>
				</details>
			</details>
			<details class="nav">
				<summary>
					<a class="toc__link" href="#content-numbering-system-dummy-header-2-1">Dummy Header 2</a>
				</summary>
				<details class="nav">
					<summary>
						<a class="toc__link" href="#content-numbering-system-dummy-header-2-1-dummy-header-3-2">Dummy Header 3</a>
					</summary>
					<a class="toc__link" href="#content-numbering-system-dummy-header-2-1-dummy-header-3-2-dummy-header-4-1">Dummy Header 4</a>
					<a class="toc__link" href="#content-numbering-system-dummy-header-2-1-dummy-header-3-2-dummy-header-4-2">Dummy Header 4</a>
				</details>
			</details>
			<details class="nav">
				<summary>
					<a class="toc__link" href="#content-numbering-system-the-code">The Code</a>
				</summary>
				<a class="toc__link" href="#content-numbering-system-the-code-html">HTML</a>
				<a class="toc__link" href="#content-numbering-system-the-code-css">CSS</a>
			</details>
			<a class="toc__link" href="#content-numbering-system-special-thanks">Special Thanks</a>
		</details>
	</div>
</section>

<section>
  <h1>Content Numbering System</h1>

  <h2>Dummy Header 2</h2>

  <h3>Dummy Header 3</h3>

  <h3>Dummy Header 3</h3>
  <h4>Dummy Header 4</h4>
  <h5>Dummy Header 5</h5>

  <hr>

  <h2>Dummy Header 2</h2>

  <h3>Dummy Header 3</h3>
  <h4>Dummy Header 4</h4>

  <h4>Dummy Header 4</h4>
  <h5>Dummy Header 5</h5>
  <h6>Dummy Header 6</h6>
  <h6>Dummy Header 6</h6>

  <h5>Dummy Header 5</h5>
</section>

CSS

h2::before, h3::before, h4::before, h5::before, h6::before,
#toc > details > *:not(:first-child) a::before,
#toc > details > a::before {
  content: "";
  background: #83bad6;
  border-radius: 4px;
  color: black;
  font-size: 0.875em;
  font-weight: bold;
  margin-right: 0.375em;
  opacity: 0.5;
  padding: 0px 0.25em;
  text-shadow: none;
}

body {
  counter-reset: counter_header_2;
}

h2 {
  counter-reset: counter_header_3;
}

h3 {
  counter-reset: counter_header_4;
}

h4 {
  counter-reset: counter_header_5;
}

h5 {
  counter-reset: counter_header_6;
}

h2:before {
  counter-increment: counter_header_2;
  content: counter(counter_header_2);
}

h3:before {
  counter-increment: counter_header_3;
  content: counter(counter_header_2) "." counter(counter_header_3);
}

h4:before {
  counter-increment: counter_header_4;
  content: counter(counter_header_2) "." counter(counter_header_3) "." counter(counter_header_4);
}

h5:before {
  counter-increment: counter_header_5;
  content: counter(counter_header_2) "." counter(counter_header_3) "." counter(counter_header_4) "." counter(counter_header_5);
}

h6:before {
  counter-increment: counter_header_6;
  content: counter(counter_header_2) "." counter(counter_header_3) "." counter(counter_header_4) "." counter(counter_header_5) "." counter(counter_header_6);
}

#toc > details {
  counter-reset: counter_toc_2;
}

#toc > details > details {
  counter-reset: counter_toc_3;
}

#toc > details > details > details {
  counter-reset: counter_toc_4;
}

#toc > details > details > details > details {
  counter-reset: counter_toc_5;
}

#toc > details > details > details > details > details {
  counter-reset: counter_toc_6;
}

#toc > details > *:not(:first-child) > summary a:before,
#toc > details > a:before {
  counter-increment: counter_toc_2;
  content: counter(counter_toc_2);
}

#toc > details > details > *:not(:first-child) > summary a:before,
#toc > details > *:not(:first-child) > a:before {
  counter-increment: counter_toc_3;
  content: counter(counter_toc_2) "." counter(counter_toc_3);
}

#toc > details > details > details > *:not(:first-child) > summary a:before,
#toc > details > details > *:not(:first-child) > a:before {
  counter-increment: counter_toc_4;
  content: counter(counter_toc_2) "." counter(counter_toc_3) "." counter(counter_toc_4);
}

#toc > details > details > details > details > *:not(:first-child) > summary a:before,
#toc > details > details > details > *:not(:first-child) > a:before {
  counter-increment: counter_toc_5;
  content: counter(counter_toc_2) "." counter(counter_toc_3) "." counter(counter_toc_4) "." counter(counter_toc_5);
}

#toc > details > details > details > details > details > *:not(:first-child) > summary a:before,
#toc > details > details > details > details > *:not(:first-child) > a:before {
  counter-increment: counter_toc_6;
  content: counter(counter_toc_2) "." counter(counter_toc_3) "." counter(counter_toc_4) "." counter(counter_toc_5) "." counter(counter_toc_6);
}

SASS (SCSS)

h2, h3, h4, h5, h6,
#toc > details > *:not(:first-child) a,
#toc > details > a {
  &::before {
    content: "";
    background: #83bad6;
    border-radius: 4px;
    color: black;
    font-size: 0.875em;
    font-weight: bold;
    margin-right: 0.375em;
    opacity: 0.5;
    padding: 0px 0.25em;
    text-shadow: none;
  }
}

body {counter-reset: counter_header_2}
h2 {counter-reset: counter_header_3}
h3 {counter-reset: counter_header_4}
h4 {counter-reset: counter_header_5}
h5 {counter-reset: counter_header_6}

h2:before {counter-increment: counter_header_2; content: counter(counter_header_2)}
h3:before {counter-increment: counter_header_3; content: counter(counter_header_2) "." counter(counter_header_3)}
h4:before {counter-increment: counter_header_4; content: counter(counter_header_2) "." counter(counter_header_3) "." counter(counter_header_4)}
h5:before {counter-increment: counter_header_5; content: counter(counter_header_2) "." counter(counter_header_3) "." counter(counter_header_4) "." counter(counter_header_5)}
h6:before {counter-increment: counter_header_6; content: counter(counter_header_2) "." counter(counter_header_3) "." counter(counter_header_4) "." counter(counter_header_5) "." counter(counter_header_6)}

#toc > details {counter-reset: counter_toc_2}
#toc > details > details {counter-reset: counter_toc_3}
#toc > details > details > details {counter-reset: counter_toc_4}
#toc > details > details > details > details {counter-reset: counter_toc_5}
#toc > details > details > details > details > details {counter-reset: counter_toc_6}

#toc > details > *:not(:first-child) > summary a:before,
#toc > details > a:before {
  counter-increment: counter_toc_2;
  content: counter(counter_toc_2);
}
#toc > details > details > *:not(:first-child) > summary a:before,
#toc > details > *:not(:first-child) > a:before {
  counter-increment: counter_toc_3;
  content: counter(counter_toc_2) "." counter(counter_toc_3);
}
#toc > details > details > details > *:not(:first-child) > summary a:before,
#toc > details > details > *:not(:first-child) > a:before {
  counter-increment: counter_toc_4;
  content: counter(counter_toc_2) "." counter(counter_toc_3) "." counter(counter_toc_4);
}
#toc > details > details > details > details > *:not(:first-child) > summary a:before,
#toc > details > details > details > *:not(:first-child) > a:before {
  counter-increment: counter_toc_5;
  content: counter(counter_toc_2) "." counter(counter_toc_3) "." counter(counter_toc_4) "." counter(counter_toc_5);
}
#toc > details > details > details > details > details > *:not(:first-child) > summary a:before,
#toc > details > details > details > details > *:not(:first-child) > a:before {
  counter-increment: counter_toc_6;
  content: counter(counter_toc_2) "." counter(counter_toc_3) "." counter(counter_toc_4) "." counter(counter_toc_5) "." counter(counter_toc_6);
}

Special Thanks

This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):

Source: https://philarcher.org/diary/2013/headingnumbers/