及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > CSS > 疑似要素:beforeや:afterのcontentで改行や空白を表示する方法

疑似要素:beforeや:afterのcontentで改行や空白を表示する方法

2017/03/10
CSS の疑似要素 :before:aftercontent プロパティで、改行させたり、空白を表示することなどができる。

記号など、特殊文字も表示できる。
content で特殊文字を表示する方法についてはこちら »

content で改行

contentプロパティの値に改行コードを記述し、そのクラスに「white-space: pre;」も併記する。
span:after {content:"\a";white-space: pre;}
のように記述する。

・LFは「\a
・CRLFは「\d\a
どちらでもOK。

サンプル

CSS
 LF
span.lf:after {content:"\a";white-space: pre;}
 CRLF
span.crlf:after {content:"\d\a";white-space: pre;}
HTML
LFです。
CRLFです。
表示
LFです。
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

サンプル

CSS
 U+0020:半角スペース
span.space01:after {content:"\0020";}
 U+00A0:半角スペース( )
span.space02:after {content:"\00A0";}
HTML
←スペース。
←改行禁止のスペース。
表示
←スペース。
←改行禁止のスペース。
MENU Ξ