Different height for background

by rajeevRF

HTML

<div class="outer">
<h1 class="heading_title heading1"><a href="#131">General Overview</a></h1>
<h2 class="heading_title heading2"><a href="#163">Introduction to AppTec360</a></h2>
<h2 class="heading_title heading2"><a href="#165">Supported Device Operating Systems</a></h2>
<h2 class="heading_title heading2"><a href="#169">Explanation of the “Supervised-Mode” on Apple Devices</a></h2>
<h3 class="heading_title heading3"><a href="#177">Available in the Supervised-Mode</a></h3>
<h3 class="heading_title heading3"><a href="#184">Adding a device to the DEP</a></h3>
<h3 class="heading_title heading3"><a href="#186">Adding a testing DEP</a></h3>
<h2 class="heading_title heading2"><a href="#171">Explanation of Android Enterprise</a></h2>
</div>

CSS

.outer{max-width:600px;overflow:hidden;}
h1, h1 a { font-weight: 400; font-size: 26px !important; border-left: 4px solid #000; color: #000; line-height: 38px; padding-left: 10px; margin-bottom: 15px; }
h2, h2 a { color: #006da3; font-size: 23px !important; font-weight: 400; border-left: 4px solid #006da3; line-height: 30px; padding-left: 10px; margin-bottom: 15px; }
h3, h3 a { color: #000; font-size: 21px !important; font-weight: 400; border-left: 4px solid #2690cd; line-height: 28px; padding-left: 10px; margin-bottom: 15px; }
h4, h4 a { color: #000; font-size: 19px !important; font-weight: 400; border-left: 4px solid #71a3bc; line-height: 26px; padding-left: 10px; margin-bottom: 15px; }
h5, h5 a { color: #000; font-size: 16px !important; font-weight: 400; border-left: 4px solid #000; line-height: 21px; padding-left: 10px; margin-bottom: 15px; }
.heading1 a, .heading2 a, .heading3 a, .heading4 a, .heading5 a, .heading6 a { padding-left: 0px !important; border: 0px !important; margin-left: 0px !important;text-decoration:none; }
.heading_title { margin: 0; } 
.heading1,.heading1 a { font-size: 23px !important; line-height:34px; }
.heading2,.heading2 a { margin-left: 15px; font-size: 19px !important; line-height:28px; } 
.heading3,.heading3 a { margin-left: 30px; font-size: 17px !important;line-height:25px; } 
.heading4,.heading4 a { margin-left: 45px; font-size: 16px !important;line-height:24px; } 
.heading5,.heading5 a { margin-left: 60px; font-size: 14px !important;line-height:22px; } 
.heading6,.heading6 a { margin-left: 75px; font-size: 12px !important;line-height:20px; }
.heading_title { display: flex; align-items: baseline; box-sizing: border-box; width: 100%; position: relative; }
.heading_title a { display: inline-block; width: fit-content; margin-bottom: 0; min-width: fit-content; }
.heading_title::after {margin-left: 5px;background-image: url(https://www.cwdev.apptec360.com/wp-content/uploads/2024/05/grey-box-repeater.png);background-size:...