擬似要素は、css側から文字、画像を入れることができる

こんにちは tanaka です。

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

擬似要素 ::before ::after
を使うと

セレクタで指定されたhtmlの前や後ろに
 ・文字
 ・画像(background-image)
を追加できる。

擬似要素の作成は
セレクタの後に
擬似要素 ::before ::after
をつけます。

コードは以下の通りで、

.sample01::before {
content: “123”;
}

(.sample01の子要素:inlineになる)

文字を入れるときは
プロパティcontent を使います。
(例)
content: “123”;
(123の文字が追加される)

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

.sample01::before {
content: "123";
}

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

擬似要素 ::before ::afterの説明

擬似要素 ::before ::after
を使えば
css側でhtml要素を作ることができます。

本来
 html = 文字、画像
 css = 配置、装飾
と決まっていますが

擬似要素 ::before ::after
を使用して
css側からでも文字、画像(background-image)
を入れることができます。

これを使えば、
html側に入れたくない
記号や印、花罫線の画像などを
css側から入れることができます。

そして、
作成された
擬似要素 ::before ::after
初期値は
 ・指定セレクタの子要素
 ・display:inline
になります。

文字を入れるときは
プロパティcontent を使います。

(例)
content: “123”;
(123が入力文字)

バックスクリーンだけ使用する時は
中身が入っていない
content: “”;
を使います。
(content: “”; が無いとバックスクリーンは表示されません)

プロパティcontent は、
擬似要素 ::before ::after だけ
使用することができます。

それでは、
実際に使い方を見ていきましょう。

擬似要素 ::before ::afterの具体例

前説

あああああ

に対して
擬似要素 ::before ::after
を使っていきます。

element画像01
element画像02

::before

擬似要素 ::before を使い
 123
の文字を入れます。

before = 前

なので
 123 + あああああ

結果は
下の画像のようになります。

element画像03
element画像04

::after

先ほどの
擬似要素 ::before で使った
 123あああああ
に対して

そこへさらに
擬似要素 ::after を使い
 456
の文字を入れます。

after = 後

なので
 123あああああ + 456

下の画像のようになります。

element画像05
element画像06

中身の入っていない html に対して使うとどうなるのか

それでは、
何も入っていないhtmlへ

擬似要素 ::before 
を使うと
どうなるでしょうか?

<h1></h1> ← 123

123が追加されます。

htmlが空でも
文字を追加することはできます。

element画像07
element画像03
element画像08

まとめ

擬似要素 ::before ::after

擬似要素 ::before ::after
を使えば

css側から
 ・文字
 ・画像(background-image)
を、追加できる。

追加場所は
セレクタ 指定のhtml 前後。
 ::before = 前
 ::after  = 後
セレクタの子要素(inline)
として追加される。

使い方

使い方はセレクタの後につける。

.sample01::before {
content: "123";
}
プロパティcontent

文字を入れるには
プロパティcontent
を使う
content: “入れたい文字”;

content: “”; は絶対必要

バックスクリーンだけ使用する時も
content: “”;
は絶対必要。

 

擬似要素 ::before ::after
を見かけたら

文字や記号、画像を
指定セレクタの前や後ろに追加している

と同時に

css側でhtmlの子要素を作成している
と思ってください。

以上、
擬似要素 ::before ::after
の説明でした。

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

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