CSS Title / Header Right Side Border Line With Box Padding

Question

How to bring the right padding of the box without any extra {div}. The title ::after Selector should admire the right padding of the box. Here is my code. How to do that?

Quentin Veron gave me the right solution.

 .box { background: #f9f9f9; padding: 20px; overflow: hidden; position: relative; } .title { padding-left: 18px; border-left: 8px solid; border-color: #000; line-height: 30px; position: relative; overflow: hidden; // This is very important } .title:after { content: ""; display: inline-block; border-top: 2px solid; border-color: #000; vertical-align: middle; width: 100%; } .title:after { margin-right: -100%; margin-left: 10px; } 

 <div class="box"> <h3 class="title">Title Right Border Line</h3> </div> 

Answer 1

Is this what you are looking for?

 .box { background: #f9f9f9; padding: 20px; display: flex; align-items: center; justify-content: flex-start; } .title { padding-left: 18px; border-left: 8px solid; border-color: #000; line-height: 30px; flex: 0 1 auto; margin: 0; padding-right: 12px; } .box::after { content: ""; border-top: 2px solid; border-color: #000; flex: 1 0 auto; } 

 <div class="box"> <h3 class="title" style="">Title Right Border Line</h3> </div>