【CSSリファレンス】content
こんにちは(・∀・)
CSSプロパティをご紹介します。今回ご紹介するCSSプロパティはcontentです。
概要
contentプロパティを使用して要素の直前または直後に文字列や画像などを挿入する事ができます。contentは:before擬似要素、:after擬似要素でのみ使用可能となります。
.sample:before {
content: "文字列";
}
適用要素
before擬似要素・after擬似要素
指定できる値
- normal
- 内容を挿入しない
- none
- 内容を挿入しない
- 文字列
- 挿入する文字列を指定
- URL
- 挿入するURLを指定
- カウンタ
- カウンタ関数を設定しカウンタを付ける
- attr(属性名)
- 指定した属性の値を表示
初期値
normal
サンプル
HTML
<p class="demo">Webデザインラボ</p>
CSS
.demo:before{
content: "Copyright(C)";
}
.demo:after {
content: ". All Rights Reserved.";
}
Result
Webデザインラボ