如何添加带有 hr 标签的边框底部答案

【问题标题】：How to add border bottom lined with hr tag如何添加带有 hr 标签的边框底部
【发布时间】：2021-10-26 03:04:35
【问题描述】：

所以我想做这样的东西：

但是当我尝试时它看起来像这样：

这是我的代码：

            <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>

【问题讨论】：

标签： html css bootstrap-4 laravel-blade

【解决方案1】：

你可以使用 :after 选择器和相对位置和绝对位置，检查一下：

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>

【讨论】：

【解决方案2】：

在span 标签上放置一个:after 伪元素这样底部 “边框” 只跨越作为内容。使元素位置相对和伪标签的绝对位置，这样你就可以控制位置了。左 0和底部 -1.6rem.

.border-bottom {
  position: relative;
}

.border-bottom::after {
  content: '';
  position: absolute;
  height: 4px;
  background: #138ab5;
  bottom: -1.6rem;
  left: 0;
  width: 100%;
}

<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>

【讨论】：

谢谢你的解释，对我有帮助

【解决方案3】：

hr 标签可以使用以下样式

hr {
    background-color: #555;
    border: none;
    display: block;
    height: 4px;
    overflow: visible;
    position: relative;
    width: 100%;
}

hr:before {
    background-color: #f90;
    content: '';
    display: block;
    height: 8px;
    left: 0;
    position: absolute;
    top: -2px;
    width: 20%;
    z-index: 1;
}

【讨论】：

【解决方案4】：

span.border-bottom.border-primary {
    border-bottom: 2px solid #0aa092;
    padding: 0 0 10px;
}

【讨论】：