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

效果圖