CSSの擬似要素::beforeと::afterを徹底解説！初心者でも使える具体例つき
生徒
「CSSで文字の前や後ろにマークや記号を自動で入れたりする方法ってありますか？」
先生
「はい、CSSの擬似要素::beforeと::afterを使えば、簡単に装飾ができますよ。」
生徒
「擬似要素ってなんですか？難しそうです…」
先生
「大丈夫です。実際に使ってみると、とても簡単で便利ですよ。さっそく見ていきましょう！」
1. 擬似要素::beforeと::afterとは？
CSSの擬似要素（ぎじようそ）とは、HTMLのタグそのものには書かれていないけれど、見た目だけに追加できる「見えない要素」のことです。
::before（ビフォア）と::after（アフター）は、ある要素の「前」や「後ろ」に文字や記号を表示させるときに使います。
例えば、見出しの前に★（星）マークをつけたいときや、リンクの後に矢印→をつけたいときに便利です。
2. 擬似要素を使うときの基本ルール
擬似要素::beforeや::afterを使うには、必ずcontentというプロパティをCSSに書く必要があります。
このcontentは「表示させたい内容」を指定するところです。文字列を表示したいときは、ダブルクォーテーション（"）で囲んで書きます。
3. ::beforeを使ったサンプル
次の例では、すべてのh2タグの前に「★」マークを表示します。
<style>
h2::before {
content: "★ ";
color: orange;
}
</style>
<h2>おすすめ商品</h2>
ブラウザ表示
4. ::afterを使ったサンプル
次は、リンクのあとに矢印「→」を追加するサンプルです。
<style>
a::after {
content: " →";
color: gray;
}
</style>
<a href="#">公式サイトはこちら</a>
ブラウザ表示
5. 擬似要素はどんな時に使える？
擬似要素は、装飾やデザインをCSSだけで調整したいときにとても便利です。たとえば以下のような場面でよく使います。
- リストの先頭にアイコンをつけたいとき
- ボックスの前後に飾り線をつけたいとき
- 強調したいテキストに印をつけたいとき
6. 注意点とよくある間違い
::beforeや::afterを使うときは、対象の要素が「表示されている」必要があります。display: none;やvisibility: hidden;が指定されていると、擬似要素も表示されません。
また、contentを書かないと何も表示されません。contentが空だと、ただの何もない空間になります。
HTMLには何も追加せず、CSSだけで見た目を変えることができるのが擬似要素の強みです。
7. 文字以外の使い方も可能
contentには文字だけでなく、アイコンや絵文字、画像を使うこともできます。ただし、画像を使う場合はbackground-imageを使うことが多いです。
例：チェックマークを絵文字で追加する
<style>
li::before {
content: "✅ ";
}
</style>
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
ブラウザ表示
8. よく使う場面とデザインの幅
::beforeと::afterを使えば、ボタンの中に装飾を入れたり、注意書きの枠線を作ったり、Webサイト全体のデザインを整えるときに活用できます。
CSSでデザインを制御することで、HTMLはシンプルなまま保つことができ、保守性（メンテナンスのしやすさ）も上がります。
装飾のためだけの文字や記号は、HTMLに直接書かず、CSSで追加するようにすると、HTMLの意味がぶれずに済みます。
まとめ
擬似要素::beforeと::afterで理解できたこと
CSSの擬似要素である::beforeと::afterは、HTMLの構造を変更せずに見た目だけを柔軟に装飾できる非常に重要な仕組みです。今回の記事では、CSSの基本から一歩進んだ装飾方法として、擬似要素を使った文字追加、記号表示、デザイン調整の考え方を学びました。
特に初心者にとって理解しておきたいポイントは、::beforeと::afterは「HTMLに存在しない要素を、CSSだけで見せている」という点です。見出しの前に星マークを付けたり、リンクの後ろに矢印を付けたりする表現は、HTMLに直接書いてしまいがちですが、CSSで制御することで構造と見た目を分離できます。
これはWeb制作においてとても重要な考え方で、HTMLは文章の意味や構造を表し、CSSは見た目やデザインを担当する、という役割分担を守ることにつながります。結果として、修正や管理がしやすくなり、実務でも評価されやすいコードになります。
contentプロパティの役割
::beforeや::afterを使う際に必須となるのがcontentプロパティです。contentに何を書くかで、表示される内容が決まります。文字列だけでなく、記号、絵文字、空文字なども指定でき、装飾の幅が一気に広がります。
また、contentを指定しなければ擬似要素は表示されないという点も重要です。CSSを書いているのに何も表示されない場合、多くはcontentの指定忘れが原因です。このようなよくあるミスを知っておくことで、トラブルシューティングもしやすくなります。
まとめのサンプルプログラム
ここでは、今回学んだ内容を振り返るために、見出しの前後に装飾を加えるサンプルを掲載します。記事内で使ってきたclassやタグ構成と同じ形式で記述しています。
<style>
h2::before {
content: "◆ ";
color: #0d6efd;
}
h2::after {
content: " ◆";
color: #0d6efd;
}
</style>
<h2>まとめセクション</h2>
ブラウザ表示
このように、CSSの擬似要素を使うことで、HTMLを一切変更せずにデザインを調整できます。Webサイト制作、ブログ作成、ランディングページ、学習用サンプルなど、さまざまな場面で応用できます。
生徒
「::beforeと::afterって、最初は難しそうだと思っていましたが、HTMLを書き換えずに装飾できるのがすごく便利だと感じました。」
先生
「そうですね。特にCSSでデザインを管理する考え方は、Web制作ではとても大切です。意味のあるHTMLと、装飾のためのCSSを分けることで、読みやすく修正しやすいコードになります。」
生徒
「contentを書き忘れると表示されない点も、実際に試してみてよく分かりました。よくあるミスも知れて安心です。」
先生
「その気付きはとても大切です。今回学んだ擬似要素は、ボタン装飾やリスト装飾、注意書き表示など、実務でもよく使います。ぜひいろいろな場面で試してみてください。」
生徒
「CSSだけでここまで表現できると分かって、Webデザインが楽しくなってきました。次はもっと複雑な装飾にも挑戦してみたいです。」
先生
「とても良い姿勢ですね。基礎をしっかり理解できているので、応用もきっとスムーズに身につきますよ。」
この記事を読んだ人からの質問
