擬似要素のbeforeを使い写真を挿入したのですが改行した際に行頭が揃いませんどの様に解決したら良いでしょうか。

Question

以下の様な形で文章の前に画像を挿入したのですが、画面幅を狭めてしまうと改行したときに行頭が揃わずに画像のすぐしたにきてしまいます。どの様な原因が考えられるでしょうか。

<div class="p-single__articleText">
  <h5>こんな感じで信号よりも高くて迫力がすごい！！</h5>
</div>

 .p-single__articleText h5 {
  display: inline-block;
  font-weight: bold;
  margin: 1.5em 0 1rem;
  padding: 7px 10px;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 50px;
  width: 100%;
}

.p-single__articleText h5::before {
  content: '';
  display: inline-block;
  width: 70px;
  height: 70px;
  background-image: url(images/fujinami.jpg);
  background-size: contain;
  vertical-align: middle;
  border-radius: 50%;
}

Comments

[m.ts10806]

HTMLどうなっているのでしょう。
ただ、SCSSのまま提示されてもそのままでは再現確認が出来ないので、可能ならコンパイル後のCSSを提示してください。

[leomessi]

ご指摘ありがとうございます。
修正いたしましたのでご確認お願い致します。

Answer 1

どの様な原因が考えられるでしょうか

それは、そういうものです。

インラインブロックは、大雑把に言うと要素自体がとても大きなひとつの文字として扱われるので、そうなってしまいます。
個人的には、横並びにするためにインラインブロックを使うのは、あまりよくないと思っています。

フレックスレイアウトやグリッドレイアウトなどを検討してみてください。