::after实现下划线

• 效果如下

  
  
  1675146899532.png

• 废话不多说直接看代码

// =============html部分===============
<div class="meal-nav">
      <div class="layout-flex layout-flex-center">
              <span class="meal-nav-item meal-nav-item-active">
                    企业套餐
              </span>
              <span class="meal-nav-item">
                    个人套餐
              </span>
      </div>
</div>

// =============css部分===============
 .meal-nav {
     text-align: center;
     margin-bottom: 47px;
 }
 .meal-nav-item {
     width: 120px;
     height: 24px;
     font-size: 20px;
     font-family: Inter-Regular, Inter;
     font-weight: 400;
     color: #434E70;
     text-align: center;
     line-height: 24px;
     display: inline-block;
     cursor: pointer;
 }
 .meal-nav-item-active {
     font-size: 28px;
     font-weight: bold;
     color: #0088FF;
     position: relative;
 }
 .meal-nav-item-active:after {
     position: absolute;
     content: '';
     width: 20px;
     height: 4px;
     top: 40px;
     left: 50px;
     background: #0088FF;
     display: inline-block;
     border-radius: 20px;
 }
 .meal-nav-item:last-child {
     margin-left: 60px;
 }
.layout-flex {
    display: flex;
}
.layout-flex-center {
    justify-content: center;
}