こんにちは、未来のCSS魔法使いの皆さん！今日は、私たちはCSSの擬似要素という魔法の世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この冒険をガイドするのをとても楽しみにしています。では、虚拟の杖（キーボード）を握りしめ、一緒に飛び込んでみましょう！

CSS - Pseudo Elements

概要

部屋を飾っているとします。家具（HTML要素）は配置されていますが、家具自体を変えることなく、少しのアクセントを加えたいと思いませんか？それが擬似要素の役目です！HTML要素に実際に変更を加えることなく、魔法の装飾を加えることができます。

文法

コードを書く前に、呪文（文法）を学びましょう：

セレクタ::擬似要素 {
  プロパティ: 値;
}

二重のコロン（::）に注意してください。これは私たちの魔法の杖です！ブラウザに、「ここで特別なものを作る」と伝えます。

まずは::after擬似要素から始めましょう。これは、要素の周りを回り、余分なコンテンツを持つ魔法のアシスタントのようなものです。

.magic-box::after {
  content: "?";
  margin-left: 5px;
}

この例では、クラス「magic-box」を持つすべての要素の後ろにトップハットの絵文字が表示されます。まるでCSSの帽子から兎（またはトップハット）を引き出したかのようです！

::afterが要素の後ろを従うアシスタントなら、::beforeは先導するアシスタントです。要素の前にコンテンツを追加します。

.wizards-name::before {
  content: "?‍♂️ ";
}

これにより、すべての魔法使いの名前の前に魔法使いの絵文字が表示されます。アブラカダブラ！

テキストを古代の魔法の巻物のように見せたい場合は、::first-letterがあなたの呪文です！

p::first-letter {
  font-size: 2em;
  color: #8A2BE2;
  float: left;
  margin-right: 5px;
}

これにより、各パラグラフの最初の文字が大きく、紫になり、左に浮かび上がります。まるで魔法の書写者のようにあなたのマanuscriptを光らせます！

::first-letterと似ていますが、全文の最初の行全体に適用されます。

p::first-line {
  font-weight: bold;
  color: #4B0082;
}

これにより、各パラグラフの最初の行が太字になり、紺色になります。魔法の巻物の最も重要な部分を強調するようなものです！

選択されたテキストの見た目をカスタマイズしたい場合は、::selectionがその呪文です！

::selection {
  background-color: #FFD700;
  color: #000000;
}

これにより、ページ上でテキストを選択すると、金色の背景に黒いテキストになります。まるでカーソルを金の王（キング・ミダス）に変えたかのようです！

単一の要素に複数の擬似要素を使用できます。これは、魔法の効果を強めるために呪文を重ねるようなものです！

.magical-quote::before,
.magical-quote::after {
  content: '"';
  font-size: 2em;
  color: #FF1493;
}

これにより、クラス「magical-quote」を持つ要素の前後に引用符が追加され、神秘の予言のように際立つようになります！

ここに、私たちが学んだすべての擬似要素メソッドの便利な呪文の本（テーブル）を示します：

擬似要素	説明	例
::after	要素の後ろにコンテンツを追加	`.element::after { content: "?"; }`
::before	要素の前にコンテンツを追加	`.element::before { content: "?‍♂️"; }`
::first-letter	テキストの最初の文字をスタイル	`p::first-letter { font-size: 2em; }`
::first-line	テキストの最初の行をスタイル	`p::first-line { font-weight: bold; }`
::selection	選択されたテキストをスタイル	`::selection { background-color: gold; }`

若い魔法使いの皆さん、擬似要素の力は、HTMLを混乱させることなくスタイルとコンテンツを追加する能力にあります。彼らは見えない助け手であり、必要なときにはいつもそこにいますが、邪魔をすることはありません。

私たちの魔法のCSS旅を終えるにあたり、あなたがこれらの擬似要素で実験する勇気を持つことを願っています。組み合わせたり、重ねたり、合わせたりすることを恐れずに。唯一の限界はあなたの想像力です！

私の教師としての年月の中で、生徒たちがこれらのシンプルなツールで素晴らしいことを創造したのを見てきました。ある生徒は、魚（::beforeと::after要素）が画面を横切るバーチャル水族館を作成しました！

では、CSSの杖を振り、自分だけの魔法を創造してください。そして、ウェブ開発の世界では、少しの魔法を信じることは決して遅すぎないことを忘れないでください。幸せなコーディングを、そしてスタイルシートが常にバグフリーでありますように！

Credits: Image by storyset