cssから文字を入れるには、擬似要素::before ::afterを使う

こんにちは、tanaka です。

htmlではなく、
cssから文字をいれられないのかな

と思ったことはありませんか?

実は、
擬似要素 ::before ::after
を使えばできます。

擬似要素 ::before ::after
は指定されたセレクタの
前や後ろに文字や画像を入れることができます。

使い方は

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

これで
123の文字を.sample01の
前に入れることができます。

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

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

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

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

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

疑似要素 ::before ::after でcssから文字入れ

セレクタに
::before
::after
を加えることによって

htmlを書き換えることなく
cssから子要素を追加、
文字入れをすることができます。

これを擬似要素と言います。

擬似要素 ::before ::after
の記事を用意しました。
よければご覧ください。

以上、
cssから文字を入れるには
擬似要素::before ::afterを使う
の話でした。

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

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