テキストの左右の画像を固定させたい

Question

表現したいこと

（画像）テキストテキストテキストテキストテキストテキストテキストテキストテキスト（画像）

↓（幅が狭くなると）

（画像）テキストテキストテキストテキスト
テキストテキストテキストテキストテキスト（画像）

となってしまうのですが

（画像）テキストテキストテキストテキスト（画像）
テキストテキストテキストテキストテキスト

こうしたいのです！

現在は

<p>テキストテキストテキストテキストテキストテキスト</p>

p:before {
content: url(img.png);
}
p:after {
content: url(img.png);
}

現在はこんな感じなのですが、なにか良い方法はないでしょうか…？
ご教示お願いします。

Comments

[kei344]

「画像wp」とは？

[MeB]

思いっきり誤字です。すみません。

[Lhankor_Mhy]

teratail は、行頭のスペースを削除するので、スペースを使った表現は伝わらない可能性がありますよ。

[yoshinavi]

画像はアイコンみたいな感じですか？before画像の下は回り込んで、after画像の下は回り込まない仕様でしょうか？疑似要素の使用（特にafter）は必須なのでしょうか？質問が多くてスミマセン。

[MeB]

kei344さんの回答ベストアンサー押したつもりでいました…すみません。またよろしくお願いします！

Answer 1

p {
  padding-right: 50px;
  position: relative;
}
p:before {
  content: url(https://placehold.jp/12/99cc99/339933/50x50.png);
  float: left;
}
p:after {
  content: url(https://placehold.jp/12/99cc99/339933/50x50.png);
  position: absolute;
  right: 0;
  top: 0;
}
```**動くサンプル：**[https://jsfiddle.net/f0bxfjs3/](https://jsfiddle.net/f0bxfjs3/)

Answer 2

p{
  display:flex;
}

とかは、どうですか？