先日、仕事でCSSを使って改行したいという場面に遭遇しました。
通常、HTMLで改行する場合<br>を使うのが一般的ですが、今回はCSSのみで改行をする方法をご紹介いたします。
CSSの記述
改行させたい位置に擬似要素を挿入して、下記のCSSを記述することで改行を行えます。
一つだけ注意点があります。ご紹介する方法はインライン要素でしか使うことができません。
なので、HTMLは下記のような感じで、改行したい箇所で<span></span>などを使って<span class="br"></span>などとするといいと思います。
こんな感じ↓
<p>brクラスの前<span class="br">brクラスの中</span>brクラスの後</p>
brクラスの前で改行
.br::before {
content: "\A";
white-space: pre;
}
結果は以下のようになると思います。
brクラスの前brクラスの中 brクラスの後
brクラスの後ろで改行
.br::after {
content: "\A";
white-space: pre;
}
結果は以下のようになると思います。
brクラスの前 brクラスの中brクラスの後
解説
::beforとか::afterが擬似要素です。
::beforは「指定した要素の直前にcontent:で記述した内容を追加」::beforは「指定した要素の直後にcontent:で記述した内容を追加」となります。
今回は、\Aを追加していることになります。そして、この\A改行を表しています。
しかし、ブラウザで表示される際には、HTML内の改行は無視されます。これを無視されないようにしているのがwhite-space: pre;の部分です。
最後に
今回は擬似要素を使うことでCSSを使ってうまく改行を行えました。
擬似要素はcontent:部分に指定したものが表示されるので、改行だけでなく、色々な使い方ができます。
ただ、検索エンジンは疑似要素をコンテンツの中身として見ていませんので気をつけて下さい。
