How to add border bottom lined with hr tag

Alghany Jagad

So i want to make something looking like this:

but when i try it only look like this:

Here's my code:

            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><span class="border-bottom border-primary">Daftar Kategori</span></h5>
                        <hr>
                    </div>
                </div>
            </div>

Shahryar Mohajer

you can use :after selector with position relative and absolute , check this:

h5{
     position:relative;
}
h5:after
{
    content:' ';
    display:block;
    border-bottom:4px solid #409bf7;
    width:200px;
    position:absolute;
    padding-bottom:21px;
}
hr{
    border-top:none;
    border-bottom: 2px solid #666;
}

   <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><span class="border-bottom border-primary">Daftar Kategori</span></h5>
                        <hr>
                      
                         <h5 class="card-title"><span class="border-bottom border-primary">Daftar Kategori</span></h5>
                        <hr>
                      
    
                         <h5 class="card-title"><span class="border-bottom border-primary">Daftar Kategori</span></h5>
                        <hr>
                      
                         <h5 class="card-title"><span class="border-bottom border-primary">Daftar Kategori</span></h5>
                        <hr>
                    </div>
                </div>
            </div>

Collected from the Internet

Please contact [email protected] to delete if infringement.