擬似要素とは？css側から文字、バックスクリーン、画像を入れる機能

擬似要素「::before」「::after」とは？

擬似要素「::before」「::after」とは、
css側から文字を入れる方法です。

css側で擬似的にhtml要素を作ることから「擬似要素」と呼ばれています。

使い方は簡単で
　前に入れたければ「::before」
　後に入れたければ「::after」
を使います。

html

<h1>あああ</h1>

css

h1::before {
content: "１";
}

h1::after {
content: "２";
}

結果

１あああ２

擬似要素「::before」「::after」は、子要素、inline

擬似要素「::before」「::after」は、
特に指定がなければ

　１：指定したセレクタの子要素
　２：display:inline

になります。

疑似要素には、バックスクリーンも入れられる

疑似要素には、
「バックスクリーン」を入れることもできます。

しかし

「バックスクリーンだけ」使う場合も「content: “”」は絶対必要です。

この「content: “”」が無いと
擬似要素「::before」「::after」は機能しません。

html

<h1 class="box01">あああ</h1>

css

.box01::after {
display: block;
content: "";　　←絶対必要

background-color: red;
width: 300px;
height: 3px;
}

結果

疑似要素は「画像」「花罫線」を入れることが可能

疑似要素は、
バックスクリーン・イメージを使って「画像」「花罫線」を入れることも可能です。

画像

html

<h1 class="box01">あああ</h1>

css

.box01::after {
display: block;
content: "";　　←絶対必要

background-image: url(food_pizza.png);
width: 300px;
height: 300px;
}

結果

花罫線

html

<h1 class="box01">あああ</h1>

css

.box01::after {
display: block;
content: "";　　←絶対必要

background-image: url(small_flower_pink.png);
background-repeat: space;
width: 300px;
height: 30px;
}

結果

擬似要素「::before」「::after」には「content: “”」が絶対必要

擬似要素「::before」「::after」を使うときは、
どのような使い方でも「content: “”」が絶対必要です。

この「content: “”」がないと
擬似要素「::before」「::after」は機能しません。

まとめ