HTML

<div class="box1">
    <span>
      我的下划线占全屏
    </span>
    <div class="fade"></div>
  </div>
  <div class="box2">
    <span>
      这个跟我的盒子宽度一样长
    </span>
    <div class="fade"></div>
  </div>
  <div class="box2">
    <span>
      嘿嘿嘿
    </span>
    <div class="fade"></div>
  </div>

CSS

 .box1 {
      text-align: center;
      position: relative;
      background-color: pink;
    }

    .fade {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #E40960, #3C85FF);
      border-radius: 2px;
    }

    .box2 {
      overflow: hidden;
      display: inline-block;
      position: relative;
      padding-left: 100px;
    }