CSS 見出しに横棒

CSSで見出しに横棒をつける

<h2 class="line">ライン</h2>

.line {
        display: flex;
        align-items: center;
      }
.line::before,
.line::after {
             content:"";
             height: 1px;
             width: 10px;
             background-color: #333;
             }

ーラインー

↑こんな感じの横棒を付けられる。
widthを消して、

flex-grow: 1;

とすると横幅いっぱいの横棒になる。