福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【CSS】疑似要素(::before・::after)のcontent内で改行を使うには?

SUGOYOKU BLOG

【CSS】疑似要素(::before・::after)のcontent内で改行を使うには?

はじめに


福岡のホームページ制作・SEO対策の株式会社スゴヨクです。


CSSの疑似要素「::before」、「::after」を使用する際に、content内のテキストに改行を入れたくなったことはありませんか?

やり方を知らないと手間取ってしまいがちですが、知っていればあっという間に実装できますので、こちらになるべくわかりやすく書き残しておきたいと思います。



簡単2STEPです

その1:white-spaceプロパティを指定する

疑似要素のcontent内で改行を扱うには、white-space:pre;またはwhite-space:pre-wrap;を指定する必要があります。

white-spaceプロパティは、行の折り返し地点(要素のボックスの端)で自動的に改行をするか、空白が連続している場合に一つの空白にするか、改行を空白に置き換えるかなど、改行や空白の扱いを指定するものです。

→「white-spaceプロパティ」についてはこちらから

white-space:pre;は、改行や連続する空白をそのまま表示します。 ボックスの端では自動的な折り返しは行いません。

一方のwhite-space:pre-wrap;は、同じく改行や連続する空白をそのまま表示しますが、ボックスの端で自動的に折り返しを行います。



その2:改行したい位置に「\A」を入れる

white-spaceプロパティの指定をしたら、あとは改行したい箇所に「\A」(バックスラッシュ or 円マーク)を入れるだけで改行することができます。


HTML
CSS


おわりに


あっという間に実装できますので、ぜひ活用してみてください。


CSS疑似要素のcontent内に改行を入れたくて困っている方、勉強中の方の参考になれば幸いです。

HP無料診断

毎月3社様限定SEO対策無料診断

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得