【CSS】contentを解説！擬似要素にコンテンツを挿入しよう！

シュウ

今回は【CSS】contentを解説！擬似要素にコンテンツを挿入しよう！
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
contentの使い方について学びたい方へ
:beforeや:afterについても学習しよう

擬似要素である:before、:afterに対してcontentを指定しています。
:beforeを指定すると要素の直前にコンテンツが挿入されます。
:afterを指定すると要素の直後にコンテンツが挿入されます。

[記事の内容]

contentについて

contentプロパティとは、「:before」と「:after」擬似要素にコンテンツを挿入します。
書き方は以下のようになります。

/*-before--*/
〇〇:before {content: 〇〇;}

/*-after--*/
〇〇:after {content: 〇〇;}

指定できる値

normal(初期値)
コンテンツを何も挿入しません
none
normalを同じになります、コンテンツを何も挿入しません
文字列
content: ""(ダブルクオーテーション)で囲み、文字を挿入します
※(シングルクオーテーション)でも問題ありません
url(ファイルのURL)
content: url("")(ダブルクオーテーション)で囲み、urlを指定し画像ファイルを挿入します
※(シングルクオーテーション)でも問題ありません
counter(カウンター名)
カウンター名を指定することで、連番を挿入します、counter-incrementと同時に指定します
attr(属性名)
要素の属性名を指定することで、指定されている属性の値が挿入します
open-quote
quoteプロパティで指定した開始記号が挿入します
close-quote
quoteプロパティで指定した終了記号が挿入します

content 文字列について

文字列とは、content: ""(ダブルクオーテーション)または、(シングルクオーテーション)で囲み、
文字を挿入します。
テキストを入力し、文字色や背景色などCSSでの装飾を可能になります。

文字列について

新メニュー〇〇追加
新メニュー〇〇追加
新メニュー〇〇追加

<ul>
	<li>新メニュー〇〇追加</li>
	<li>新メニュー〇〇追加</li>
	<li>新メニュー〇〇追加</li>
</ul>

ul li {list-style: none;}

ul li:before {

	/*--contentを指定--*/
	content: "NEW";
	
	/*--以下 装飾--*/
	color: #fff;
	background-color: #fa5e5a;
	margin: 0 20px 0 0;
	padding: 5px 20px;
}

content url(ファイルのURL)について

url(ファイルのURL)とは、content: url("")(ダブルクオーテーション)または、(シングルクオーテーション)で囲み、urlを指定し画像ファイルを挿入します
クラス名を指定することにより、個別に
content: url("")の指定が可能になります。

url(ファイルのURL)

サルくん
キリンくん
ゾウくん
クマくん

<ul>
 	<li class="list-01">サルくん</li>
	<li class="list-02">キリンくん</li>
	<li class="list-03">ゾウくん</li>
	<li class="list-04">クマくん</li>
</ul>

ul li {list-style: none;}

ul li:before {
	margin: 0 20px 0 0;
	vertical-align: middle;
}

/*--contentを指定--*/

ul li.list-01:before {
	content: url("画像パス");
}
ul li.list-02:before {
	content: url("画像パス");
}
ul li.list-03:before {
	content: url("画像パス");
}
ul li.list-04:before {
	content: url("画像パス");
}

content counter(カウンター名)について

counter(カウンター名)とは、カウンター名を指定することで、連番を挿入します。
counter-incrementと同時に指定します。

counter-incrementプロパティとは、カウンター名を入力をすることにより、連番の指定が可能になります。指定した要素が続く度に数字が1つずつ増えていきます。

counter(カウンター名)

〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品

<ol class="list-inner">
 	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
</ol>

ol.list-inner li {
	/*--カウンター名を「num」に指定--*/
	counter-increment : num 1;
	list-style: none;
}
	
ol.list-inner li:before {
	/*--content  counter(num)に指定--*/
	content: "第" counter(num) "位";
		
	/*--以下 装飾--*/
	color: #febe3e;
	margin: 0 20px 0 0;
	font-weight: bold;
}

ポイント！
counter(カウンター名)を指定する際のポイント！
counterはリストタグ以外での指定も可能になりますが、連番(数値)の意味になるため、
ol li「順序のあるリスト」での使用が一番適してるかとおもわれます。

content attr(属性名)について

attr(属性名)とは、要素の属性名を指定することで、指定されている属性の値が挿入します。
属性名とは、href属性やtitle属性になります。

attr(属性名)

<div title="どうぶつたちのすむもり"><img src="画像パス"></div>

img:after{

	/*--content  htmlのtitle属性の値を取得--*/
	content:attr(title);
	
	/*--以下 装飾--*/
	display:block;
	color:#fff;
	font-size: 18px;
	text-align:center;
	margin: 20px 0 0;
}

content open-quote、close-quoteについて

open-quoteとは、quoteプロパティで指定した開始記号が挿入します。
close-quoteとは、quoteプロパティで指定した終了記号が挿入します。

quoteプロパティとは、contentプロパティで挿入する記号を指定する際に使用します。
挿入する記号は(ダブルクオーテーション)または、(シングルクオーテーション)で囲み指定します。
半角スペースで区切り、開始記号と終了記号をそれぞれ指定します。

open-quote、close-quote

ホームページ制作、名刺制作、ロゴ制作など、デザインをする際には配色は欠かせない
要素の1つになってきますよね。

<p><q>ホームページ制作、名刺制作、ロゴ制作</q>など、デザインをする際には配色は欠かせない
要素の1つになってきますよね。</p>

p q {
	
	/*--quotes指定--*/
	quotes: "「" "」";
}


p q:before {

	/*--open-quote指定--*/
	content: open-quote; 
	color: #febe3e; 
	font-weight: bold;
}


p q:after {

	/*--close-quote指定--*/
	content: close-quote; 
	color: #febe3e; 
	font-weight: bold;
}