【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
  • このエントリーをはてなブックマークに追加

関連記事

ニコニコ動画やYoutubeのRSSフィードもサムネ付きで手軽に表示できるブログパーツ

通常サイトのRSSだけでなく、ニコニコ動画やYoutubeの動画サイトのRSSを読み込んでサムネ画像

記事を読む

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

人気記事・ランダム記事等紹介の忍者レコメンドが大幅にパワーアップした件

以前このブログにて忍者レコメンドの紹介記事を書きました。その際にこのブログにも忍者レコメンドを設置し

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

美人画像を表示してくれるブログパーツまとめ

美人時計など有名なものもありますが、美人画像を表示してくれるブログパーツをまとめました。暦や時刻を表

記事を読む

人気記事表示ブログパーツの忍者レコメンドを使ってみる

忍者レコメンドとは 今回は忍者レコメンドという人気記事表示のブログパーツを紹介します。忍者レコメン

記事を読む

関連記事を表示するブログパーツまとめ

これまでいくつか関連記事を表示させる方法について記事を3つの記事投稿してきましたが、ここで簡単にまと

記事を読む

さくらサーバーにフォルダをアップロードする方法

さくらサーバーにフォルダをアップロードする…という機能は無いみたいで個別にFTPソフトを使う必要があ

記事を読む

お名前.comのでサブドメインを取得してロリポップで使う方法

タイトルどおりなのですがお名前.comで取得した独自ドメインからサブドメインを取得し、ロリポップで使

記事を読む

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

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