CSSの::after疑似要素で改行をする

レスポンシブデザインの設計では、画像の元サイズより画面幅が大きいときは元サイズで、画像の元サイズより画面幅が小さい場合は画面幅まで縮小して表示する、という動作にすることがよくあります。CSSで書くとこんな風に。

img {
  width: auto;
  max-width: 100%;
  height: auto;

ただ、この設定をすると、"画面幅が元画像の幅よりちょっとだけ大きい"条件になると、回り込みできる範囲が狭くなり1行当たり数文字という見苦しい感じになってしまいます。
これに対処するため、タブレットやpcサイズでは

img {
  width: auto;
  max-width: 50%;
  height: auto;

として問題を回避しますが、スマートフォンではどうしても1つ目のCSSでいきたい。
そこで、スマートフォンサイズでは回り込みを解除するとともに、画像のあとに改行を入れて文字を画像の下から始めるようにします。

.alignleft {
  float: left;
}
.alignright {
  float: right;
}
@media screen and (max-width:480px) {
  img.alignleft, img.alignright {
  float: none;
  display: block;
  }
  img.alignleft::after, img.alignright::after {
    content: "\A";
    white-space: pre;
  }
}

alignleft, alignrightのクラスは、imgに回り込みを設定するクラスです。
imgタグにこれを設定している場合、スマートフォンサイズで回り込みを解除（float:none;）、after疑似要素で改行コード（\A）を入れるとともに、これを有効にするため"white-space:pre;"を併記します。
で、ここまでは調べると普通に出てくるのですが、重要なのはimg要素に"display:block;"をつけること。これがないと改行が機能してくれません。