横線の設定をしたbefore,afterにはbackground-colorを入れずにh2のテキスト部分にだけbackground-colorを入れたいです

Question

コード
```### 前提・実現したいこと
作りたい正解の写真送付しました。
条件　
body
background-color:rgba(0, 0, 0, .05);
color:#fff;
h2を囲うbackground-color：#e6e6e5;
横線の設定をしたbefore,afterにはbackground-colorを入れずにh2のテキスト部分にだけbackground-colorを入れたいです
しかしbefore,afterにも背景色がつきます


### 該当のソースコード

ＨＴＭＬ/ｃｓｓ```ここに言語名を入力
ソースコード

ＨＴＭＬ

ここに言語を入力```
コード
```
```
<h2>PHOTOGRAPH</h2>
```
css
 h2 {
    font-weight: 700;
    font-size:25px;
    display: flex;
   align-items: center;
    margin: 30px 0 40px;
　　 background-color:#e6e6e5;
}0. 
h2:before,h2:after {
border-top: 3px solid;
content: "";
flex-grow: 1;
padding:0;

}
h2:before {
margin-right: 1rem;![イメージ説明](40beac2bcfa0a1cf0aa3cb063a1a0808.jpeg)
}
h2:after {
margin-left: 1rem;
}

### 試したこと

h2以外のタグを使うとできるができるだけ使いたくない。

Answer 1

絶対配置を使ってみました。

サンプル

h2 {
font-weight: 700;
font-size: 25px;
align-items: center;
margin: 30px auto 40px;
background-color: #e6e6e5;
display: flex;
width: max-content;
padding: 0 1em;
}
h2::before{
border-top: 3px solid;
content: "";
padding: 0;
position: absolute;
width: 100%;
z-index: -1;
left: 0;
}

Answer 2

HTMLを変更してもいいのならテキストをspanで囲んでそれに背景色を設定すればいいでしょう。

<h2><span>PHOTOGRAPH</span></h2>

body {
  background-color:rgba(0, 0, 0, .05);
}

h2 {
  font-weight: 700;
  font-size:25px;
  display: flex;
  align-items: center;
  margin: 30px 0 40px;
} 
h2 > span {
  background-color:#e6e6e5; 
  padding: 0 1rem;
}
h2:before,h2:after {
  border-top: 3px solid;
  content: "";
  flex-grow: 1;
  padding:0;
}

CodePenサンプル

Answer 3

beforeやafterは<h2>の内側に入るものですので、backgroundは<h2>本体と一体のものになります。

そして、この例ではh2:beforeやh2:afterはborder分の高さしか取られませんので、そのまま<h2>の背景が見えてしまいます。