::beforeと::after内の改行とスペース

サイトのデザインをする際に欠かせない擬似要素 ::before と ::after。

リストやタイトルを装飾したり、メニューアイテムに使用したりとかなり広範囲で使用している。

その中で時々、「content内で改行とかって出来たっけ？」となる時があるので、
改行とスペースの使用方法についての覚書メモ。

content内で改行

番号付きリストなどでたまに使用したりする時に、番号のしたに文章を入れなければいけないような事例が発生した時、 ::before要素内で改行って出来たっけ。。。。と調べたところ、方法がありました。

white-space:pre　+　\A

white-space:preを指定。改行したい場所に \A と記述する。

#sample::before{
 white-space:pre;
 content: '1\A導入編';
 font-size: 2rem;
}

すると、このように::beforeで表示することが出来る。

1
導入編

content内でスペースを入れる

要素と要素の間にスペースを入れたい時や、要素の先頭または後ろに半角スペースを入れたい時がある。

white-space:pre-wrap で半角スペース　or \00a0

全角スペースだと反映されるが、半角スペースが効かない。そんな時にはこれ！

#sample::before{
white-space:pre-wrap;
content: '1 導入編';
font-size: 2rem;
}

---------------------------

#sample2::before{
content: '1\00a0導入編';
font-size: 2rem;
}

white-space:pre-wrap;だと効かない場合もあるので、個人的には\00a0を使用することが多い。

1 導入編

contentはよく使用するものの、たまに必要な時に、なかなかパッと出てこないことが。
CSSも全部使いこなせるとhtmlとCSSだけでも綺麗で軽いサイトが作れるのだが、何年やっていても全部を覚えきれないものです。