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デザインが楽しくなってきました。次はもっと複雑な装飾にも挑戦してみたいです。」
先生
「とても良い姿勢ですね。基礎をしっかり理解できているので、応用もきっとスムーズに身につきますよ。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
CSSの擬似要素::beforeと::afterとは何ですか？初心者向けに意味を教えてください。
CSSの擬似要素::beforeと::afterとは、HTMLに直接書かれていない内容を「見た目だけで追加できる」CSSの機能です。特定の要素の前や後ろに記号や文字などを表示することができます。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
