【CSS】beforeのcontentで改行する

公開日: : 最終更新日:2014/08/14 CSS, サイト制作

スポンサーリンク

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

  • このエントリーをはてなブックマークに追加

関連記事

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

Twitterのオリジナルサイズの画像ファイル(.jpg-large,.jpg-orig等)を一括リネームする

Twitterの画像をオリジナルサイズで保存しようとするとjpg-la

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑