【CSS】gridで 塗りつぶさない 切り取り線

CSS川柳。

サンプル

言いたいことは以下のサンプルを見てもらったら理解いただけると思います。

必要部分のみのソース

<div class="line"><span>gridキリトリ線</span></div>

.line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 40px;

  &::before,
  &::after {
    height: 1px;
    content: '';
    display: block;
    background-image: linear-gradient(to right, #000 10px, transparent 10px);
    background-size: 20px 1px;
  }
}

解説

切り取り線や見出しの区切り線としてよく紹介されているのが、線を文字の後ろに配置して、文字を白（背景と同じ色）に塗りつぶす方法です。
しかしこの方法では背景色が変わった場合に対応できません。
display: grid; で実装すると、賢く実装できます。

どういう配置をしているかというと、
::before（左側の線） span（文字） ::after（右側の線）
の3つの要素を
grid-template-columns: 1fr auto 1fr;
によって、並べています。
spanの幅がautoによって文字量に合わせて決定され、
::beforeと::afterはそれぞれ同じ幅になるように残りの部分を使います。

サンプルでも紹介している通り、gridではなくflexでも塗りつぶさない実装はできるのですが、
gridなら幅に関する指定を親側にまとめることができて楽なので、gridで紹介しました。