どうも、7noteです。今回は擬似要素（::before,::after）を使ってサンドイッチを作って行きます！

疑似要素って何それ美味しいの？
って人でもこれを読んでマスターしていきましょう！

疑似要素ってそもそも何？

疑似要素は名前の通り、疑似的な要素です。通常のdivタグなどの要素と何が違うのかと言うと、「疑似」的な要素なので要素として認識されません。要素として認識されないと、どんな影響があるかと言うと、

文字を入れても検索順位やSEOに影響しない。
ドラッグしてもマウスで選択できない。

などが挙げられます。

早速使ってみて感覚を掴みましょう。習うより慣れろです！

材料はこちら(1人前)

ファイル	CSSプロパティ	意味
index.html
style.css	::before ::after	要素の前に疑似要素要素の後に疑似要素
bread_before.png		左のパンの画像
gu.png		具材の画像
bread_after.png		右のパンの画像

作り方

index.htmlに具材の画像を用意。

style.cssでこの具材の前後にパンを用意。（とりあえず文字で）

style.cssで疑似要素にパンの画像を入れて完成！

1.index.htmlに具材を用意。

index.html

<div class="sandwich">具材</div>

2.style.cssでこの具材の前後にパンを用意。（とりあえず文字で）

style.css

.sandwich::before { /* 中の要素の最初につく */
    content: "パン"; /* contentは疑似要素に必ず必要。""の中に文字を入れると、それが表示される。 */
}

.sandwich::after {  /* 中の要素の最後につく */
    content: "パン"; /* contentは疑似要素に必ず必要。""の中に文字を入れると、それが表示される。 */
}

こんな感じになるよ。

左の「パン」はbeforeで作った疑似要素で、右の「パン」はafterで作った疑似要素になります。
疑似的な要素なので、カーソルでは選択できません！

3. style.cssで疑似要素にパンの画像を入れて完成！

具材も画像に変えておきます。

index.html

<div class="sandwich"><img src="gu.png" alt="具材"></div>

style.css

.sandwich::before {
	content: ""; /* 画像を入れるので空に */
	display: inline-block; /* 疑似要素は通常高さを指定できないので、inline-blockにする */
	background: url(bread_before.png); /* パンの画像を背景に入れる */
	width: 52px; /* 画像の横幅を指定 */
	height: 609px; /* 画像の縦幅を指定 */
}

.sandwich::after {
	content: ""; /* 画像を入れるので空に */
	display: inline-block; /* 疑似要素は通常高さを指定できないので、inline-blockにする */
	background: url(bread_after.png); /* パンの画像を背景に入れる */
	width: 172px; /* 画像の横幅を指定 */
	height: 609px; /* 画像の縦幅を指定 */
}