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

関連記事

zipimage

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

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

記事を読む

sliderimage

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

capturefullpageimg1

指定URLのWebサイトの画面全体をキャプチャする方法

Webサイトのスクリーンショットを撮る方法としてはいくつかありますが、各方法ごとに調べたものを紹介し

記事を読む

Youtube-Image

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

DSC_04611-600x401

【さくらサーバー】htaccessを使って拡張子無しでアクセスする

さくらサーバーで拡張子なしのアクセスする方法について非常に苦労したのでつづっておきます。私は

記事を読む

twitterimage

任意URLのTweetボタンを複数設置する

TwitterのTweetボタンをWebサイトやブログに複数設置する方法です。複数設置するということ

記事を読む

statusfollower

Twitterのフォロワーが有効かどうか評価するツール

ツイッターの自分のフォロワーがスパムや活動休止中か判定することのできるツールに『Status Peo

記事を読む

_rtm0919_tp_v

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

linkwithin_image_demo1

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

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

記事を読む

adobe-blueprint-15

5秒でできる!超簡単にCSSで吹き出し作成!

『CSS ARROW PLEASE!』というCSSだけで作る吹き出し作成サービスがあるの

記事を読む

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

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

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

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

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

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

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

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

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

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

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

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

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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