CSS3 badge

CSSの擬似要素「::before」と「::after」で設定したcontent内のテキストを改行させる方法を紹介します。

このアイデアを知っておくとHTMLタグの数をかなり減らせますし、CSSコーディングの自由度も増します。

ポイントは2つ。

  1. 疑似要素にwhite-space:pre;を追加すること。
  2. そしてcontent内の改行させたい箇所に\Aを挿入します。

具体的には次のようなコードになります。

HTML

<div class="sample">
Hello World
</div>

CSS

.sample::after {
content: 'みなさん\Aこんにちは';
white-space:pre;
}

コレで「\A」の箇所で改行されるようになります。