こんにちは！フロントエンドの現場を長年歩んできた、あなたのCSSの伴走者です。
CSSを勉強し始めると、なんだか不思議なコードに出会いませんか？そう、今日の主役である `::before` 擬似要素（ぎそようそ） と、その相棒である `content` プロパティ です。
初めてこれを見たとき、「HTMLに書いてないのに、画面に文字やアイコンが出てきた！？魔法なの！？」って、私も昔は頭が混乱しました。なんだか名前も難しそうですよね。「擬似要素」なんて、いかにもプログラミング用語の壁って感じです。
でも、大丈夫ですよ。安心してください。
今日の記事を読み終える頃には、`::before` はあなたの最強の相棒になって、「あ、こういうことね！」とスイスイ使いこなせるようになっています。一緒に優しく紐解いていきましょう！
—
1. `::before` って一体なんなの？（身近な例え話）
まずは、「擬似要素」という硬い言葉を柔らかく解釈してみましょう。
`::before` を一言で言うと、「HTMLの要素の『すぐ直前』に、目に見えない秘密のスペースを作って、そこに新しい何かをこっそり登場させるマジック」 です。
お買い物のレジの行列をイメージしてください。
あなたがレジに並ぼうとしたとき、店員さんが「あ、お客様、どうぞ！」と、あなたの直前に「本日のオススメ商品」の小さなポップをサッと置いてくれた……そんなイメージです。
HTMLという「元々の現実世界」には何も書いていないのに、CSSという「裏方の魔法使い」が、要素のフタを開ける直前に、まるで最初からそこにあったかのように何かを付け足してしまう。これが `::before` の正体です。
—
2. 絶対にセットで使う `content` プロパティの秘密
さて、この `::before` 君、実は「相棒（`content` プロパティ）」がいないと、ただの怠け者になって何も仕事をしてくれません。
`::before` はあくまで「場所（席）」を用意するだけです。その席に「何を表示するのか」を教えてあげるのが、`content`（コンテンツ）プロパティの役割なんです。
基本の形を見てみましょう。
/ 「ある要素」の直前に、何かを出現させる基本の形 /
.box::before {
content: “ここに文字を入れるよ”;
}
この `content` プロパティの中身を変えるだけで、文字だけでなく、色々なものを表示させることができます。次の章から、具体的な使い方を3つのパターンに分けて見ていきましょう！
—
3. `content` でできる3つのこと
実務の現場でも本当によく使う、代表的な3つのパターンをご紹介します。
パターンA：テキスト（文字）を表示する
一番シンプルな使い方です。例えば、タイトルの前に「【NEW】」という文字を自動でつけたいときなどに使えます。
/ 新着情報のタイトルの前に、自動で「【NEW】」をつける例 /
.news-title::before {
content: “【NEW】 “; / 最後の半角スペースもちゃんと反映されます /
color: #ff3366; / 目立つようにピンク色にする /
font-weight: bold; / 太字にする /
}
HTML側は `class=”news-title”` とだけ書いておけばいいので、後から「やっぱりNEWの文字をやめよう」となったときも、CSSを1行直すだけで全ページの表示を変えられます。楽ちんですね！
パターンB：アイコンや記号を表示する
最近のWebサイトでは、リストの頭に「・」の代わりに可愛い矢印やアイコンを置くことがよくありますよね。そんなときにも `::before` が大活躍します。
/ リストの直前に小さな矢印（▶）を添える例 /
.menu-item::before {
content: “▶ “;
color: #0066cc;
font-size: 0.8em; / 文字より少し小さくする調整 /
}
パターンC：空っぽにして「デザインの飾り」を作る
「文字もアイコンも表示したくない！ただ、要素の前に小さな丸い点や、四角い帯（アクセントのデザイン）を置きたい！」というときもあります。
そんなときは、`content: “”` と中身を空っぽ（ダブルクォーテーションの間を何も入れない）にします。
/ 見出しの左側に、可愛い縦長の赤いバー（アクセント）を添える例 /
.section-heading::before {
content: “”; / 中身は空っぽ！だけど「場所」を作る /
display: inline-block; / ブロックのように幅や高さを効かせる魔法 /
width: 6px; バーの幅 /
height: 20px; / バーの高さ /
background-color: #ff4757; / バーの色（赤） /
margin-right: 8px; / 見出しの文字との間に少し隙間をあける /
vertical-align: middle; / 位置をいい感じに真ん中に合わせる /
}
これ、現場のコーディングでもめちゃくちゃよく使います！HTMLを汚さずに、CSSだけでリッチなデザイン装飾ができるので最高ですよ。
—
4. 初学者がハマりがちな「つまずきポイント」と優しい処方箋
ここで、CSSを学び始めた人が必ずと言っていいほど通る「あれ、映らないぞ？」という罠と、その回避方法をこっそりシェアしておきますね。
罠その1：`content` プロパティを書き忘れた
> 症状： コードを書いたのに、画面に何も表示されない。
> 処方箋： `::before` を使ったら、必ずセットで `content: “〜”;` を書くと呪文のように覚えておいてください。これがないと、席だけ用意して主人が座っていない状態になってしまいます。
罠その2：幅や高さが効かない
> 症状： `width` や `height` を書いたのに、四角形にならずに消えてしまう。
> 処方箋： `::before` は初期状態では「テキストの仲間（インライン要素）」として生まれてきます。そのため、大きさを自由に変えたいときは、先ほどのコード例にもあったように `display: inline-block;` や `display: block;` を一緒に書いてあげてくださいね。これで自由に大きさを変えられるようになります！
—
5. まとめ
いかがでしたでしょうか？
`::before` 擬似要素と `content` プロパティは、一見すると難しそうに見えますが、やっていることはシンプルです。
1. 要素の直前に「見えないスペース（席）」を作る（`::before`）
2. その席に何を置くか指定する（`content`）
HTMLを汚さずにデザインを豊かにできる、フロントエンドの心強い味方です。
ぜひ、ご自身のメモ帳やコードエディタを開いて、見出しやボタンなどにちょこっと `::before` を試してみてくださいね。
もし途中で分からなくなったら、いつでもこの記事に戻ってきてください。あなたのWeb制作の旅を、これからもずっと応援しています！
コメント