cssでテキストの回り込みを解除したいです。

一般的なQ&Aのページを作成するときに、いつも困っているのですが、
「Q」や「A」を画像にしたときにテキストが回り込みます。

今回はdlタグを利用し、dtとddに擬似要素のbeforeを仕様して、背景画像として画像を表示させています。
この場合において、テキストを回りこませない方法はありますでしょうか？
もしくは、現在のこのような形をコーディングする際の主流の方法があれば、教えてください。
CSSは以下になります。

dl {
dt,dd {
&:before {
content:"";
height: 30px;
width: 30px;
vertical-align: middle;
margin-right: 10px;
display: inline-block;
}
}
dt {
margin-bottom: 20px;
&:before {
background: url(../img/page/q.gif) no-repeat left center;
}
}
dd{
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px dashed $txt_color;
&:before {
background: url(../img/page/a.gif) no-repeat left center;
}
}

何卒よろしくお願いいたします！

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2016/05/06 10:21

dt { padding-left: 1.5em; background: url(Q.png) top left/1em no-repeat; }

dd { padding-left: 1.5em; background: url(A.png) top left/1em no-repeat; }

この回答へのお礼

Ogre7077さん
ご回答ありがとうございます！
そもそもbeforeを使う意味がなかったですね^^;
paddingであっさり解決してしまいました。
ありがとうございます！

お礼日時：2016/05/06 13:06

No.2 回答者： ORUKA1951 回答日時： 2016/05/06 11:47

Sassだと思いますが、普通にCSSで十分です。

通常はtext-indentを使う。
ほかにもいくつか。
vertical-align: middle;はdisplay:table-cell でないとね。
なんであちこちに、margin記載する必要があるの？

サンプルは後程