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

画像pseudo-element-before-after100

こんにちは tanaka です。

今回は、
擬似要素「::before」「::after」の話です。

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

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

さらに

バックスクリーン、バックスクリーン画像なども入れられて便利です。

そして

この擬似要素「::before」「::after」を使えば、
html側に入れたくない「記号」「印」などを
css側から入れることができます。

それでは、
詳しく説明していきます。

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

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

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

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

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

html

<h1>あああ</h1>

css

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

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

結果

1あああ2

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

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

 1:指定したセレクタの子要素
 2:display:inline

になります。

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

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

しかし

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

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

html

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

css

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

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

結果

画像pseudo-element001

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

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

画像

html

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

css

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

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

結果

画像pseudo-element002

花罫線

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;
}

結果

画像pseudo-element003

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

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

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

まとめ

<擬似要素「::before」「::after」とは>

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

擬似的に要素を作ることから「擬似要素」と呼ばれている。

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

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

 1:指定したセレクタの子要素
 2:display:inline

になる。

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

擬似要素「::before」「::after」を使うときは、
「content: “”」が絶対必要。

これがないと擬似要素「::before」「::after」は機能しない。

以上、
擬似要素とは?css側から文字、バックスクリーン、画像を入れる機能
の説明でした。

ありがとうございました。

タイトルとURLをコピーしました