如何使用hr标签实现与标题文字对齐的底部边框效果

解决方案 #

你现在的问题是<span>是行内元素，底部边框长度仅和文字内容匹配，而<hr>默认占满父容器的全部宽度，所以两者无法对齐。可以用以下两种方式调整：

方案1：保留hr标签，适配内容宽度

给标题和hr套一层宽度自适应内容的容器，同时调整默认边距让间距更自然，Bootstrap 5可以直接使用内置的w-fit类实现：

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

如果你用的是Bootstrap 4，没有内置w-fit类，补充一行自定义样式即可：

.w-fit {
    width: fit-content;
}

方案2：省略hr标签，直接给标题加下边框（更简洁）

直接给<h5>标签加下边框样式，省略冗余的hr标签，效果完全一致：

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

其中pb-1是Bootstrap的内置内边距类，用来调整文字和底部边框的间距，你可以根据需求改成pb-2等调整间距大小。

内容的提问来源于stack exchange，提问作者Alghany Jagad