CSS Web関連

【CSS】beforeのcontentで改行する

更新日:

CSSで特定の要素の前後に何かを書き足すときにはそれぞれ疑似要素の『:before』、『:after』を使用します。

クラス内のcontentプロパティに文字を入れるとそれが挿入されますが、改行する際は『\A』のエスケープ文字と『white-space』プロパティに『pre』を記述してください。これを入れないと改行が反映されないようです。

.sample1:before{
 content:"★参考★\A";
}
.sample2:before{
 content:"★参考★\A";
 white-space: pre;
}

.sample1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキスト

.sample2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキスト

各要素には「テキスト×20」が記述されています。『white-space: pre;』を入れていないと改行が反映されていないかと思います。
(IEを使っている場合もうまく反映されないことがあります)

また画像などを利用したりすることもできます。

.sample3:before{
 content:"★参考★\A" url("sample.gif") "\A";
 white-space: pre;
}
.sample4:before{
 content:open-quote;
}
.sample4:after{
 content:close-quote;
}

sample.gif画像

.sample3

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

.sample4

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
『CSSを利用して任意の箇所に改行を入れる 』
http://r36at.blogspot.jp/2012/11/cssbrakeline.html

『イラスト飾り線 ライン』
http://www.wanpug.com/illust179.html

Amazonリンク
参考:mementoo.info

-CSS, Web関連

Copyright© めめんと , 2021 All Rights Reserved Powered by AFFINGER5.