<div class="entry-content clearfix">
  <p>Some normal text</p>
  <p>Some normal text</p>
  <p>Some normal text</p>
  <p>Some normal text</p>
  <hr>
  <h2 class="wp-block-heading">Understanding your Audience</h2>

  <p>Some normal text</p>
  <p>Some normal text</p>
  <p>Some normal text</p>
  <p>Some normal text</p>
  <hr>
  <h2 class="wp-block-heading">Crafting engaging content</h2>
  <p>Some normal text</p>
  <p>Some normal text</p>
  <p>Some normal text</p>
  <p>Some normal text</p>
  <hr>
  <h2 class="wp-block-heading">Last H2 Heading</h2>

  <p>Some normal text</p>
  <p>Some normal text</p>
  <p>Some normal text</p>
  <p>Some normal text</p>

</div>
/* special rules for the line using the :has selctor so only for modern browsers */

.entry-content:has(h2.wp-block-heading) {
  overflow: hidden;
}
.entry-content:has(h2.wp-block-heading) h2.wp-block-heading {
  position: relative;
}
.entry-content:has(h2.wp-block-heading) h2.wp-block-heading::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -35px; /* adjust to suit*/
  top: 3rem; /* adjust to suit*/
  width: 5px;
  height: 999rem;
  background: red; /* The line color*/
  z-index: -2;
}

.entry-content:has(h2.wp-block-heading)
  h2.wp-block-heading:last-of-type::after {
  background-color: white; /* must match the original background*/
  top: -0.4rem;
  z-index: -1;
}

/* This next rule for  testing only as you probably have something in place already */
.entry-content {
  padding-left: 60px;
}

/* The code you posted is below but I commented out the last-of-type h2 as it made no sense as it was a smaller size, different color and shifted right out of line. */
.entry-content.clearfix h2 {
  counter-increment: list-number;
  display: inline-flex;
  align-items: center;
}
.entry-content.clearfix h2::before {
  content: counter(list-number);
  margin-right: 0.31em;
  width: 45px !important;
  height: 45px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #030917 !important;
  border-radius: 22px 2px 23px 1px;
  color: #fff;
  margin-left: -55px;
}

/*
.entry-content.clearfix h2:last-of-type::before {
  margin-right: 0.31em;
  width: 35px !important;
  height: 35px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #d5eac7 !important;
  margin-left: -40px;
  background: #cef0b7 !important;
}
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.