如何不增加额外div实现字底部的选中条效果

    <div class="title-box">
      <span class="new selected" >选项一</span>
      <span >选项二</span>
    </div>

本CSS用过Stylus编译，通过设置width 0.4rem来控制底部的选中效果大小，设置white-space nowrap来实现文本不换行，但是会发现文本和选中条没有对齐，那就用display flex以及justify-content center来实现文本以及选中条的对齐

  .title-box{
    height 0.8rem
    line-height 0.8rem
    width 100%
    display flex
    justify-content center
    font-size 0.28rem
    color #000000
    background-color #ffffff
    margin-bottom 0.2rem
    .selected{
      color #58749C
      border-bottom 0.04rem solid #58749C
    }
    .new{
      margin-right 1.45rem
    }
    span{
      width 0.4rem
      display flex
      justify-content center
      white-space nowrap
    }
  }