【css】マウスオーバーで伸びる下線を、ウィンドウ幅いっぱいに伸ばす

header {
    overflow-x: hidden;//線が突き抜けないように抑える

    ul {
    list-style: none;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
        li {
          margin: 0;
          padding: 0;
          width:20%;
        }
    }

    a {
      display: flex;
      position: relative;
      height: 70px;
      align-items: center;
      justify-content: center;

      &:after {//このafter要素が肝心の線
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        padding: 0 100vw;
        margin: 0 -100vw;
        transform: scaleX(0);
        transition: .5s;//縮むときは早く縮む
      }
      &:hover:after {
        background: #dc7c1a;
        display: block;
        transform: scaleX(1);
        transition: background .5s, transform 2s;//線の色を先に表示、線の長さはゆっくりのばす
      }
    }
}

肝はこれ。どんな障害もぶち破って延びる力。

    padding: 0 100vw;
    margin: 0 -100vw;