I am building a Table of Contents page with a specific design.
As per design, each title should be followed by dots till the end of the line.
The size of the dots will also vary depending on the title’s size.
I have used the heading tag as wrap and inside there is an anchor tag. I have used the pseudo “::after” element to display the dot. I have used a dot image with Background repeat CSS.
This works as expected. But I am facing a weird issue.
For example, the Dot design of H1 will be bigger. The dot design of H2 should be a bit smaller. The dot design of H3 should be even smaller. The page will have multiple H1s, H2s, and H3s.
The issue is dots inside H3s display differently. Dot inside One H3 is bigger and another one is smaller. Even though they have the same styles.
.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: contain;background-position-x: right;height: 3.25px;content: " ";width: 100%;display: inline-block;min-width: -webkit-fill-available;background-repeat: repeat;}
h2.heading_title.heading2::after { background-image: url(https://www.cwdev.apptec360.com/wp-content/uploads/2024/05/blue-box-repeater.png); height:2.5px; }
.heading_title.heading3::after {height: 2px;}
.heading_title.heading4::after,.heading_title.heading5::after { height: 1.75px; }
h2.heading_title.heading2 { width: calc(100% - 15px); }
h3.heading_title.heading3 { width: calc(100% - 30px); }
h4.heading_title.heading4 { width: calc(100% - 45px); }
h5.heading_title.heading5 { width: calc(100% - 60px); }<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>In the above demo, the titles “Available in Supervised-Mode”, “Adding a device to the DEP”, and “Adding a testing DEP” are H3s and they all share the same CSS and their pseudo element (::after) have the same background image and CSS. But as you see, they are displayed in different sizes. DOTS inside “Adding a testing DEP” is way smaller compared to other 2 H3s.
Adding the JS Fiddle link below for the same if that’s helpful.
https://jsfiddle.net/rajeevRF/3qu9e0yL/19/