限られたHTMLで背景を追加する方法はありますか？

Question

上記のように赤枠の両サイドの外側にピンク色の背景を付けたいと思っています。

<div class="cover">
  <div class="filter">
    <p>test</p>
  </div>
</div>

.cover {
  background: pink;
}
.filter {
  max-width: 1140px;
  margin: 0 auto;
  border: 2px solid red !important;
}
.filter p {
  text-align: center;
}

上記のようにfilterクラスの親要素であるcoverクラスの背景色を付ければ可能なのですが、実際のサイトでは<div class="cover"></div>が付けれれません。
実際のサイトではreactiveproというプラグインで絞り込み検索を入れており、それが上記のコードのfilter部分にあたります。
なので実際のサイトでは、以下のような構造になっております。

<div class="filter">
  <p>test</p>
</div>

このようなhtmlのみで冒頭のような背景色を導入するにはどうすれば良いでしょうか？

.filter {
  background: pink;
  max-width: 1140px;
  margin: 0 auto;
  border: 2px solid red !important;
}
.filter p {
  text-align: center;
}

上記のようなcssだと赤枠内のみに背景色がついてしまいます。

また実際のサイトでは、ページ全体に別の背景色を使っているので、サイト全体をピンクで染めるという方法は出来ません。
長くなってしまいましたが、まとめると、

<div class="filter">
  <p>test</p>
</div>

この状態のhtmlでどんなcssを使うと以下の画像の緑枠内をピンクにすることが出来ますかという質問です。

よろしくお願いします。

Comments

[m.ts10806]

HTMLだけではなにも再現できません。

[m.ts10806]

タグもHTML,CSSだけで理解される内容ではないかと。
プラグイン云々は何の話ですか？

[Lhankor_Mhy]

「部分的に緑の背景を追加したい」とのことですが、具体的にはどの部分ですか？

[takawork]

伝わりやすいように質問を書き換えたのでよろしくお願いします。

[Lhankor_Mhy]

「緑枠内」とは、ご提示のコードで言うとどの要素に当たりますか？

[takawork]

HTMLで緑枠内の要素がないので困ってるという質問です。
赤枠の要素のみの状態で、緑枠(つまり赤枠の外側サイドも含めた範囲)をどうやって背景を足せば良いのか分からないという質問です。
伝わりにくくてすみません。

[Lhankor_Mhy]

どこまで背景を足すのか、についてどういう基準で判断するのですか？
10px分伸ばす、とかそういうことですか？

[takawork]

イメージとしては、横に広いモニターで見てもぶつ切りにならないように、高さは赤枠の高さと同じで、それが左右に無限に伸びていくイメージです。

[Lhankor_Mhy]

幅がスクリーンサイズ、高さは変更なし、ということですね。
普通に考えると、.filterの幅を変更してしまうのが手っ取り早いように思えますが、ボーダーは現状を維持したい、ということなのでしょうか？

Answer 1

こんにちは。

この質問の回答が参考になると思います。
HTML - calc()関数がわからない｜teratail

サンプル

.filter {
/* ... */
  position:relative;
}

.filter::before {
  content: "";
  background: pink;
  position: absolute;
  width: 100vw;
  height: 100%;
  border: solid 2px transparent;
  z-index: -1;
  left: calc( 50% - 50vw );
  top: -2px;
}

Comments

[takawork]

ありがとうございます。上手くいきました。