<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;
}
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.