通过css控制边框的长度

需求

最近做一个小demo，其中的一个需求是div标签的bottom有边框，且边框的长度不能与div的宽度等宽。

思路

通过伪类选择器实现，配合content在元素周围设置内容，可以将content的内容设置为" "，然后通过修改样式来改变边框的效果

实现

　　HTML结构

<div class="head">
      <div class="headTitle">核酸检测</div>
      <div class="headTitle">接种点</div>
 </div>

　　CSS样式

.head{
  display: flex;
  width: 375.2px;
  height: 50px;
  .headTitle{
    flex: 1;
    overflow: hidden;
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    color: rgb(132, 107, 255);
  }
  .headTitle::before{
    background-color: currentColor;
    border-radius: 0.2rem;
    bottom: 625px;
    content: ' ';
    height: 2.5px;
    position: absolute;
    transform: translateX(25%);
    width: 0.6rem;
  }
}

效果图