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

Question

所以我想做这样的东西：

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

这是我的代码：

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

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

Answer 2

在 span 标签上放置一个 :after 伪元素 所以底部 "border" 只跨越内容。使元素位置relative和伪标签的position absolute所以可以控制位置。左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>

Answer 3

You can use below styles for the hr tag

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

Answer 4

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

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

How to add border bottom lined with hr tag

html

css

laravel-blade

bootstrap-4