背景だけ親コンテナをはみ出して幅いっぱいになるCSS

中身はコンテナ内に残しつつ、背景は画面幅いっぱいに伸ばしたい場合はborder-imageを使います。ショートハンドでも書けますが、とても分かりづらくなるため今回プロパティは別々に書いています。border-image-sourceで背景や線の色・サイズを指定していて、border-image-outsetではみ出し量を指定しています。border-image-sourceは本来は画像を指定する箇所なのですが、linear-gradientを使うと色が指定できます。

背景が塗りの場合

border-image-source: linear-gradient(0deg,背景色 0 100%);
border-image-slice: fill 0;
border-image-outset: 0 100vw;

例）

See the Pen Untitled by yoshio (@creata-dsgni) on CodePen.

下線をつけるデザインにする場合はlinear-gradientを少し調整しましょう。

下線をつけるデザインの場合

border-image-source: linear-gradient(0deg,線の色 先の太さ,#0000 0);
border-image-slice: fill 0;
border-image-outset: 0 100vw;

例）

See the Pen Untitled by yoshio (@creata-dsgni) on CodePen.