【CSS】 疑似要素の before や after を使ってアイコン、画像などの挿入、吹き出しを作成｜HTML＆CSS入門講座（20）のPodcast
下記のPodcastは、Geminiで作成しました。
ストーリーブック
はじめに
ウェブデザインの表現力を飛躍的に高めるツールとして、CSSの「疑似要素」は極めて重要な役割を担っています。特に ::before と ::after は、HTMLの構造を汚すことなく、装飾的なアイコンの追加や補足テキストの挿入、さらには複雑な吹き出しのデザインまでを可能にする魔法のような機能です `[1]`。本報告書では、モダンなウェブ開発における疑似要素の最新仕様、アクセシビリティへの配慮、および実践的なデザイン手法について、フロントエンド設計の専門的な視点から詳細に解説します。
疑似要素の本質的な概念と基礎構造
疑似要素（pseudo-element）とは、HTMLのソースコード（DOMツリー）には直接記述されていないものの、ブラウザがレンダリングを行う際に「あたかもそこに要素が存在するかのように」生成される仮想的な要素を指します `[3]`。その名称に含まれる「疑似（Pseudo）」は、ギリシャ語の「嘘、偽り」に由来する言葉であり、文書構造そのものを変更せずに視覚的な装飾を施すという、その性質を確的に表しています `[4]`。
疑似要素の配置メカニズム
::before と ::after の最大の特徴は、ターゲットとなる要素の「内部」に生成されるという点にあります。初心者が陥りやすい誤解として、要素の外側に兄弟要素として追加されるというイメージがありますが、実際には子要素として扱われます `[4]`。
::before: 指定した要素のコンテンツの直前に挿入される第一子要素のような存在です `[3]`。
::after: 指定した要素のコンテンツの直後に挿入される最終子要素のような存在です `[1]`。
例えば、ある段落に対して ::before を設定した場合、その疑似要素は段落内のテキストの直前に配置されます。この特性を理解することは、レイアウトを構築する際の z-index の重なり順や、配置（Positioning）を制御する上で非常に重要です `[5]`。
記法における標準化と互換性
CSS3の仕様以降、疑似クラス（:hover や :focus など）と疑似要素を視覚的に区別するため、疑似要素にはダブルコロン（::）を用いることが標準とされています `[5]`。一方で、CSS2時代に導入されたシングルコロン（:before や :after）も、多くのブラウザで下位互換性のためにサポートされ続けています `[4]`。しかし、将来的な仕様への適合性と可読性の観点からは、最新のダブルコロン記法を採用することが推奨されます `[6]`。
魔法のプロパティ content の徹底活用
疑似要素を機能させるための心臓部とも言えるのが content プロパティです。このプロパティが定義されていない、あるいは無効な値（none や normal）が設定されている場合、疑似要素はレンダリングされず、ブラウザ上では display: none と同様の状態になります `[5]`。
content プロパティで指定可能な値
content プロパティは非常に多機能であり、単なるテキストの挿入に留まらない多様な表現が可能です。
| 値のタイプ | 説明 | 具体的な用途 |
|---|---|---|
| 文字列 (String) | 引用符で囲んだ任意のテキストを表示します `[1]`。 | ラベル、引用符、補足情報の追加。 |
| Unicode | エスケープシーケンスを用いた特殊文字を表示します `[5]`。 | 矢印、チェックマーク、幾何学図形. |
| 画像 (url) | 外部画像やSVGを直接読み込みます `[6]`。 | ロゴ、背景パターン、小さな装飾。 |
| 属性値 (attr) | HTML要素の属性（href, titleなど）を取得して表示します `[4]`。 | 印刷用スタイルでのURL表示、動的なラベル。 |
| カウンター (counter) | CSSで定義した連番を挿入します `[8]`。 | 自動採番されるリスト、章番号。 |
特殊文字の表現：Unicode エスケープシーケンス
CSS内で特殊な記号や絵文字を扱う場合、HTMLエンティティ（例：©）は使用できません `[5]`。代わりに、バックスラッシュに続く16進数のUnicode値を使用します。たとえば、チェックマークを表示したい場合は \2713、ハートマークなら \2665 と記述します `[6]`。
モダンなアイコン挿入と高度な色彩制御
現代のウェブサイト制作において、アイコンはナビゲーションや情報の強調に不可欠です。疑似要素を用いたアイコンの実装は、画像ファイルを直接埋め込む手法に比べて、メンテナンス性とパフォーマンスの面で大きな利点があります。
Font Awesome 6/7 を用いた実装
Font Awesome などのアイコンフォントを疑似要素で表示する場合、単にフォントを指定するだけでなく、レンダリングを最適化するための共通設定が必要です `[10]`。
共通の基本スタイル設定: すべてのアイコンに適用されるフォントレンダリング設定（-webkit-font-smoothing など）と display: inline-block を定義します `[10]`。
個別のアイコン指定: 各アイコン固有のUnicode値を content に指定し、CSSカスタムプロパティ（--fa-font-solid など）を用いてフォントスタイルを選択します `[10]`。
最新の Font Awesome では、CSS変数を利用することで、将来のバージョンアップ時にもコードの書き換えを最小限に抑えられる設計が採用されています `[12]`。
SVG マスクによる革新的なアイコンカラー変更
疑似要素でアイコンを表示する際、最も強力な手法の一つが mask-image プロパティの活用です `[14]`。これは、アイコンの形状を「マスク」として定義し、疑似要素自体の背景色を透過させる仕組みです `[15]`。この手法の最大の利点は、background-color: currentColor; と設定することで、アイコンの色を自動的に周囲のテキスト色と一致させられる点にあります `[15]`。また、ホバー時にアイコンの色を滑らかに変更するといったインタラクションも、CSSの色の変更だけで完結します。
| プロパティ | 役割 | 設定例 |
|---|---|---|
| mask-image | マスクとなるSVG画像を指定します `[14]`。 | url("icon.svg") |
| mask-size | マスクのサイズを制御します `[17]`。 | contain または cover |
| mask-repeat | マスクの繰り返しを防ぎます `[15]`。 | no-repeat |
| background-color | アイコンの「塗りの色」を決定します `[16]`。 | red, #fff, currentColor |
clip-path による高度な吹き出し（トークバブル）デザイン
吹き出しのデザインは、かつては border プロパティの境界線を利用した複雑な計算が必要な「ハック」に近い手法で作られていました。しかし現在では、clip-path プロパティを用いた、より直感的で数学的に正確な形状作成が主流となっています `[18]`。
clip-path の基本原理
clip-path: polygon() を使用すると、要素を指定した座標で自由に切り抜くことができます `[20]`。吹き出しを作成する場合、本体となる四角形に「しっぽ（三角形）」となる頂点を追加した多角形を定義します `[18]`。
例えば、下向きのしっぽを持つ吹き出しの座標計算は以下のような LaTeX 形式でモデル化できます。
吹き出しの幅をW、高さを H、しっぽの幅をw、しっぽの高さをh、しっぽの水平位置をx とすると、ポリゴンの頂点は次の集合で表されます。
これを CSS の clip-path に落とし込むことで、レスポンシブな吹き出しが完成します `[18]`。
実践的な吹き出しの実装手順
1. 親要素（本体）の設定: テキストが含まれる要素に padding を設定し、背景色を指定します。
2. 疑似要素による装飾: 背景をグラデーションにしたり、影を付けたりする場合、本体を汚さないように疑似要素で背景を描画することがあります `[19]`。
3. しっぽの追加: 疑似要素を position: absolute で配置し、clip-path で三角形を作成します。このとき、CSS変数（カスタムプロパティ）を使用して、しっぽの太さや位置を外部から調整可能にしておくと、再利用性が高まります `[18]`。
アクセシビリティの追求：最新のセマンティクス対応
疑似要素で追加されるコンテンツは、長年スクリーンリーダーなどの支援技術にとって「見えない、あるいは読み上げられない」という課題を抱えていました `[8]`。しかし、現在のウェブアクセシビリティ標準（WCAG 2.1/2.2）および最新のCSS仕様では、これに対する明確な解決策が提示されています。
content プロパティにおける代替テキスト構文
2024年以降、主要なブラウザでサポートが広がっているのが、content プロパティ内でスラッシュ（/）を使用する代替テキストの指定方法です `[8]`。
css
/* アイコン画像に音声読み上げ用の名前を付ける */
.external-link::after {
content: url("link.svg") / "新しいタブで開く";
}
/* 装飾的な記号を読み上げから明示的に除外する */
.list-item::before {
content: "\2022" / "";
}この記法を採用することで、視覚的な装飾と音声による情報の伝達をCSSだけで完全に整合させることが可能になります `[24]`。これは、情報の意味（セマンティクス）を損なうことなくデザインを拡張できる、極めて重要な技術です。
支援技術への配慮とベストプラクティス
疑似要素を使用する際、情報の重要度に応じて以下の対応を検討する必要があります。
重要な情報: 「新着」や「必須」といった重要な情報は、可能な限りHTMLのテキストとして記述すべきです `[23]`。CSSの読み込みに失敗した場合でも、情報の核心が失われないようにするためです。
装飾的な要素: 矢印やドットなどの装飾的な疑似要素には、前述の / "" 構文を用いて「空の代替テキスト」を明示的に設定することが推奨されます `[24]`。これにより、スクリーンリーダーが不必要に記号のコードを読み上げるのを防ぐことができます。
初心者が直面する一般的な陥りやすいミスと解決策
疑似要素の実装において、多くの開発者が一度は経験するエラーには共通のパターンがあります。これらを事前に把握しておくことで、デバッグ時間を大幅に短縮できます。
1. content プロパティの欠落
疑似要素が表示されない最大の原因は、content プロパティの書き忘れです。たとえ視覚的なテキストが不要で、背景画像や色だけを表示したい場合でも、content: ""; （空の文字列）を必ず記述しなければなりません `[5]`。
2. インライン要素としての制限
疑似要素（::before, ::after）はデフォルトでインライン要素（display: inline）として生成されます `[5]`。そのため、width や height を指定しても無視されてしまいます。矩形の装飾やアイコンを作成する場合は、必ず display: block または display: inline-block に設定変更する必要があります `[27]`。
3. 配置基準（Positioning）の不備
吹き出しのしっぽなどを position: absolute で配置する際、基準となる親要素に position: relative が設定されていないと、疑似要素はページ全体の端（viewport）を基準に配置されてしまいます `[7]`。これを防ぐため、「親に relative、子（疑似要素）に absolute」というルールを徹底することが肝要です。
4. 置換要素への適用不可
<img> や <input>、<br> といった要素は「置換要素（Replaced elements）」と呼ばれ、そのコンテンツが外部リソースによって置き換えられています `[5]`。これらの要素に直接 ::before や ::after を適用しようとしても、ブラウザの仕様上、多くの場合レンダリングされません `[6]`。疑似要素を使いたい場合は、対象の要素を <div> や <span> でラップし、そのコンテナ要素に対して疑似要素を設定する回避策が一般的です。
結論：プレゼンテーション層と構造層の分離
CSS疑似要素 ::before と ::after をマスターすることは、ウェブ制作において「HTMLは文書の構造（意味）を、CSSは表現（見た目）を」という役割分担を究極まで突き詰めることを意味します。セマンティックなマークアップを維持したまま、豊かな視覚的装飾を施す能力は、保守性の高いコードを書くための必須スキルです。
本報告書で解説した最新の mask-image によるアイコン制御や、clip-path による幾何学的造形、およびアクセシビリティに配慮した / 構文の活用は、プロフェッショナルなウェブ開発におけるデファクトスタンダードとなりつつあります。初心者の皆様には、これらの基本と応用をバランスよく学び、単なる「見た目の調整」を超えた、堅牢で美しいフロントエンド実装を目指していただきたいと願っています。
参考資料
1. content - CSS: Cascading Style Sheets | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content
2. ::before - CSS: カスケーディングスタイルシート | MDN, https://developer.mozilla.org/ja/docs/Web/CSS/::before
3. MDN CSS content property alternative text syntax and examples, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content
4. Modern CSS Tooltips and Speech Bubbles clip-path examples, https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/
5. CSS Masking - Ahmad Shadeed, https://ishadeed.com/article/css-masking/
6. mask-image - CSS: カスケーディングスタイルシート | MDN, https://developer.mozilla.org/ja/docs/Web/CSS/mask-image
7. Real-world CSS Masking Examples with Code - Medium, https://medium.com/@lilskyjuicebytes/clone-the-ui-2-real-world-css-masking-examples-with-code-e02e4345b83e
8. Common pitfalls and mistakes when using CSS pseudo-elements for beginners, https://css-tricks.com/pseudo-element-roundup/
9. CSS pseudo-elements common mistakes beginners, https://masoomulhaq.com/articles/beginner-mistakes-while-writing-css/
10. Alt text for CSS-generated content - Sara Soueidan, https://www.sarasoueidan.com/blog/alt-text-for-css-generated-content/
11. CSS Generated Content Module Level 3 - W3C, https://www.w3.org/TR/css-content-3/
12. Font Awesome 6 Web Fonts Pseudo-elements, http://docs-v6.fontawesome.com/web/add-icons/pseudo-elements
13. Modern CSS Tooltips and Speech Bubbles (Part 1) - IO Droplet, https://iodroplet.com/modern-css-tooltips-and-speech-bubbles-part-1/
14. clip-path - CSS: Cascading Style Sheets | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path
15. 【CSS】疑似要素beforeとafterの使い方を初心者向けに解説, https://saruwakakun.com/html-css/basic/before-after
16. 疑似要素とは？::beforeや::afterの使い方をわかりやすく解説, https://it-biz.online/web-design/pseudo-element/
17. 疑似要素beforeとafterの使い方 - みやっちブログ, https://miyattiblog.com/pseudo-elements-before-and-after/
18. Font Awesome: Add an Icon Using CSS Pseudo-elements, https://docs.fontawesome.com/web/add-icons/pseudo-elements/
19. Font Awesome: Upgrade to v7 Using CSS Pseudo-elements, http://docs.fontawesome.com/upgrade/pseudo-elements/
20. ::marker - CSS: カスケーディングスタイルシート | MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
21. Upgrading to Version 6 CSS Pseudo-elements - Font Awesome, http://docs.fontawesome.com/v6/web/setup/upgrade/pseudo-elements
22. Guide to Accessible Web Design and Development - Section508.gov, https://www.section508.gov/develop/guide-accessible-web-design-development/
23. CSS and JavaScript Accessibility - MDN, https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript
24. Understanding Digital Accessibility - ASTHO, https://www.astho.org/communications/blog/2025/understanding-digital-accessibility-before-ada-title-ii-deadline/
25. Web Accessibility Principles - Level Access, https://www.levelaccess.com/blog/web-accessibility/
26. Preparing for New Web Accessibility Requirements - American Libraries Magazine, https://americanlibrariesmagazine.org/2025/12/17/preparing-for-new-web-accessibility-requirements/
27. Clipping and Masking in CSS - CSS-Tricks, https://css-tricks.com/clipping-masking-css/
28. Advanced Marker HTML - Google Maps Platform, https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers
29. Custom bullets with CSS ::marker - web.dev, https://web.dev/articles/css-marker-pseudo-element
30. Style List Markers in CSS - CSS-Tricks, https://css-tricks.com/almanac/pseudo-selectors/m/marker/
31. Beginner Mistakes While Writing CSS - DEV Community, https://dev.to/shodamola_habeeb_dadedd0f/5-common-mistakes-beginners-make-in-css-and-how-to-fix-them-229d
32. Benefits and Drawbacks of Pseudo-elements - Stack Overflow, https://stackoverflow.com/questions/15574608/benefits-drawbacks-of-using-pseudo-elements-after-before-vs-padding-backgr
33. Writing CSS with accessibility in mind - Medium, https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
34. Failure of Success Criterion 1.3.1: inserting non-decorative generated content - W3C, https://www.w3.org/TR/WCAG20-TECHS/F87.html
35. Learning to use the :before and :after pseudo-elements - Smashing Magazine, https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/
36. WCAG Text Labels and Names - MDN, https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Text_labels_and_names
37. Tailwind CSS Content Utility Discussion, https://github.com/tailwindlabs/tailwindcss/discussions/4635
38. Alt Text for SEO - Moz, https://moz.com/learn/seo/alt-text
39. You can style alt text like any other text - CSS-Tricks, https://css-tricks.com/you-can-style-alt-text-like-any-other-text/
40. Advanced Pseudo-classes and Their Common Misuses - Pixel Free Studio, https://blog.pixelfreestudio.com/advanced-pseudo-classes-and-their-common-misuses/
41. Font Awesome API Objects - GraphQL, http://docs.fontawesome.com/apis/graphql/objects
42. Understanding WCAG Guidelines 1.3 - W3C, https://www.w3.org/TR/WCAG20-TECHS/F87.html
43. Accessibility Support for CSS Generated Content - Tink, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content
44. CSS to speech: alternative text for CSS-generated content, https://www.sarasoueidan.com/blog/alt-text-for-css-generated-content/
コメント