疑似要素:beforeや:afterのcontentで改行や空白を表示する方法
2017/03/10
CSS の疑似要素 :before や :after の content プロパティで、改行させたり、空白を表示することなどができる。記号など、特殊文字も表示できる。
content で特殊文字を表示する方法についてはこちら »
content で改行
contentプロパティの値に改行コードを記述し、そのクラスに「white-space: pre;」も併記する。span:after {content:"\a";white-space: pre;}
のように記述する。
・LFは「\a」
・CRLFは「\d\a」
どちらでもOK。
サンプル
CSSLF
span.lf:after {content:"\a";white-space: pre;}
CRLF
span.crlf:after {content:"\d\a";white-space: pre;}
HTML
LFです。表示
CRLFです。
LFです。
CRLFです。
※改行コードについて：CRLFです。
システムにより使用されている改行コードが異なる。
・LF：UNIXやMacOS Xなど
・CR：バージョン9までのMacOSなど
・CRLF：MS-DOSやWindowsなど
詳細は 改行コード - Wikipedia
上記のように、改行コードは LF、CR、CRLF の3種類あるが、contentの値に使うのはLF か CRLF のどちらかでOK。
CSSに「white-space: pre;」も一緒に記述するのを忘れずに。
content で空白(スペース)
UnicodeのU+0020か、U+00A0を使う。文字コードは、下記のように書き換えてcontent プロパティの値にする。
・半角スペース「\0020」
・半角スペース（改行禁止）「\00A0」
サンプル
CSSU+0020：半角スペース
span.space01:after {content:"\0020";}
U+00A0：半角スペース（ ）
span.space02:after {content:"\00A0";}
HTML
→←スペース。表示
→←改行禁止のスペース。
→←スペース。
→←改行禁止のスペース。
→←改行禁止のスペース。