【HTML/CSS】擬似要素before下の要素の割り込みを消したい

Question

擬似要素を使って、Q&Aを作成しています。
アイコンの下に文字が割りこんでしまっていて、この要素を下に潜り込まないCSSを作りたいのですが方法が思いつきません。どなたか知恵をお貸しいただけないでしょうか。

 <li class="item">
    <p class="question bold">質問A</p>
    <p class="answer">回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回 
    です</p>
 </li>

.question{
	margin-bottom: 30px;
	height: 45px;
}

.answer{
	color: #000;
}

.question:before{
    content: "";
    background: url(images/question_ico.png) no-repeat left top;
    background-size: 45px;
    width: 55px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
}

.answer:before{
    content: "";
    background: url(images/answer_ico.png) no-repeat left top;
    background-size: 45px;
    width: 55px;
    height: 45px;
    display: inline-block;
    vertical-align: middle;
}

よろしくお願いします。

Comments

[K_3578]

改行された結果割り込んでるってことですか？

[yuri1333]

<br>は使用しておりませんが、そうです。

[K_3578]

解決後に質問文を改変するのはやめてください。
回答との整合性が合わなくなるので。

また、画像は一度teratailに投稿した物は質問文から削除しても誰でも見れますので、
削除したい場合は運営への問い合わせで画像の削除を依頼してください。

[yuri1333]

了解しました。申し訳ございません。

Answer 1

いろいろな方法がありますが、今なら、FlexBoxを使うのが簡単でしょう。

.answer{
  color: #000;
  display: flex; /* 追加 */
}


.answer:before{
  content: "";
  background: url(images/answer_ico.png) no-repeat left top;
  background-size: 45px;
  width: 55px;
  height: 45px;
  flex-shrink: 0; /* 追加 縮小するのを防ぐ */
}

ちなみに、ymobileさんのは、text-indent と padding-left を使っているようです。

.answer{
  color: #000;
  text-indent: -55px;
  padding-left: 55px;
}


.answer:before{
  content: "";
  background: url(images/answer_ico.png) no-repeat left top;
  background-size: 45px;
  width: 55px;
  height: 45px;
  display: inline-block;
  vertical-align: middle;
}

Comments

[yuri1333]

できました！！ありがとうございました！！

Answer 2

質問内容の解釈を誤っていたのでこの回答は参考になりません。無視してください。

---

多分ある程度の幅で自動で改行されているのが原因だと思うので

.answer{
    color: #000;
    white-space: nowrap; /*追加
}

で改行は禁止できると思います

Comments

[yuri1333]

ご回答ありがとうございます。
言葉足らずで、申し訳ございません。

回答の文章が長いので、横幅を超えたら改行はして欲しいのが希望です。

例えば今2行目の先頭の「答」という文字が改行されると、アイコンAの間下に来ていますが
１行目の先頭「回」の真下に持ってきたい感じです。

完成イメージとしてはYahooさんの「人気の質問」のような(スマートフォン版にすると改行されているのにアイコン下に割り込んでいない)かたちで。
https://www.ymobile.jp/support/faq/
もしご存知でしたらよろしくお願いいたします。

[K_3578]

あぁ、そういうことですか。
気付いて追記する前に恐らく条件を満たせる別回答が出てたのでそちらを試された方が良いと思います。
(私の環境では満たせてます)

[yuri1333]

ありがとうございます。上記の方の方法でできました。