サイト制作に関するメモ書き

HOME > HTML・CSS > CSSのcontent内で改行する

CSSのcontent内で改行する

CSSのcontentで指定したテキストを改行させる方法を調べたのでメモ。

サンプルコード

content内で改行させる場合、contentを指定している疑似要素にwhite-space: pre;を追加して、content内に「\A」を入れるといいようです。

HTML

<div class="sample">
テスト<span>てすと</span>テスト
</div>

CSS

.sample span::before,
.sample span::after {
	content: '\A';
	white-space: pre;
}

::beforeと::afterに開業を追加したので、要素の前後で改行されるようになりました。
content内で改行するデモページ
 

contentで指定したテキスト内に「\A」を追加して、改行することもできます。

HTML

<div class="sample"></div>

CSS

.sample::before {
	content: 'てすと\Aてすと\A';
	white-space: pre;
}

content内で改行するのデモページ2
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP