2列にしたタイトルの両端に均等にpngを貼り付けたい

Question

前提・実現したいこと

html/CSSの勉強中で、架空のカフェサイトを制作しています。
見出しの左右横に幅40px、高さは中央揃えのアイコンのような画像を貼り付けたいのですが
なんとなくうまくできません。（目分量で測ってなんとなく数値を入れている状態）
きれいなコードを書き、画像を2行にしたテキストに対して、左右幅・上下高さともに均等に画像を配置したいです。

完成イメージ
★about★（これは一行ですが、テキストを2行にして左のようなイメージで左右に画像を並べたいです）

発生している問題・エラーメッセージ

エラー自体は出ていません

該当のソースコード

<h2 class="title"><span>about</span><span class="sub_title">お店について</span></h2> ```CSS ソースコード .title { margin-top: 150px; margin-bottom: 75px; text-align: center; }

.title span {
display: block;
position: relative;
}

h2 span {
font-size: 3rem;
}

h2 span.sub_title {
font-size: 1.1rem;
}

.title span:first-of-type::before {
content: url("../images/nikukyu.png");
/padding-right: 40px;/
position: absolute;
/top: 20px;/
transform: translate(-200%,50%);

}

.title span:first-of-type::after {
content: url("../images/nikukyu.png");
padding-left: 40px;
position: absolute;
/top: 20px;/
transform: translateY(50%);
}

### 試したこと

コメントアウトをいくつかしていますが、paddingで左右40pxずつ余白をあけることはできたのですが、上下が均等でなかったり、右画像が下に落ちてしまいました。

### 補足情報（FW/ツールのバージョンなど）
「about」のフォントサイズ指定は30px、「お店について」は11pxです。
Dreamweaverを使用していて、リセットCSSはnormalize.cssです。
yahooのリセットCSSがいいと聞いたのですが、初学者にも扱いやすいCSSはどちらか（または他にもあれば）教えていただけると幸いです。

Answer 1

.title {
margin-top: 150px;
margin-bottom: 75px;
text-align: center;
position: relative;
/width: max-content;/
padding: 0 60px;
}

.title span {
display: block;

}

h2 span {
font-size: 3rem;
}

h2 span.sub_title {
font-size: 1.1rem;
}

.title::before, .title::after {
content: url("../images/nikukyu.png");
/width: 40px;
height: 40px;/
position: absolute;
top: 60%;
transform: translateY(-50%)
}

.title::before {
left:400px;
}

.title::after {
right: 400px;
}

Comments

[necodaisuki]

すみません、解決できたと思ったのですが、自分なりに考えてみたものだとブラウザ幅を拡大縮小するとアイコンが動き、解決には至りませんでした。

Answer 2

HTMLの変更が可能なら、中身のspan要素をdivタグで囲んで、flexで横並びにするのが簡単そうです。

<h2 class="title">
  <div>
    <span>about</span>
    <span class="sub_title">お店について</span>
  </div>
</h2>

.title {
  margin-top: 150px;
  margin-bottom: 75px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
h2 span {
  font-size: 3rem;
}
h2 span.sub_title {
  font-size: 1.1rem;
}
.title::before, .title::after {
  content: url("https://placehold.jp/40x40.png");
  width: 40px;
  height: 40px;
}

現状のHTMLを変更しないなら、
position: absolute; で配置するといいでしょう。

.title {
  margin: 150px auto 75px auto;
  text-align: center;
  position: relative;
  width: max-content;
  padding: 0 40px;
}
.title span {
  display: block;
}
h2 span {
  font-size: 3rem;
}
h2 span.sub_title {
  font-size: 1.1rem;
}
.title::before, .title::after {
  content: url("https://placehold.jp/40x40.png");
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translatey(-50%)
}
.title::before {
  left: 0;
}
.title::after {
  right: 0;
}

Comments

[necodaisuki]

早急にご回答いただきありがとうございましました。
ご提案いただいた元のHTMLを保持したままCSSを変更したところ、コンテンツの左端によってしまい（中央に寄せたい）、そこから色々試してみたのですが、まだ解決に至っていません。一瞬自分の思い描いていたデザインに近づいたのでベストアンサーにしてしまいましたが、もしよろしければ、また一緒に考えていただけると嬉しいです。よろしくお願いいたします。

[necodaisuki]

なんどもすみません。あのあと、擬似要素のleftとrightを０に戻し、
margin: 150px auto 75px auto; を入力したところ、きちんと反映されました！（autoを0と勘違いしてmargin-top,bottomを指示すればいいと勝手に解釈してしまっていました。すみませんでした。）
本当にありがとうございました。

[hatena19]

margin: 150px auto 75px auto;
は、左右に余白を均等に割り当てるという設定ですので、ブロックレベル要素を中央寄せするときによく使います。