【実務・中級編】::beforeと::afterによるテキストコンテンツの挿入 – HTML実践ガイド

CSSの擬似要素で「テキストを挿入する」という誘惑：その代償と正しい付き合い方

フロントエンドの現場にいると、CSSの `::before` や `::after` でテキストを流し込みたくなる瞬間は山ほどありますよね。「アイコンの横にちょっとしたラベルを添えたい」「デザインカンプにある装飾的な引用符をHTMLを汚さずに置きたい」。

CSSで完結させる手法は、一見スマートでエレガントに見えます。しかし、中級以上のエンジニアであれば、ここで一度立ち止まって「アクセシビリティの観点からこれは本当に正しいのか？」と自問自答すべきです。今日は、この『CSSによるテキスト挿入』の裏側にあるブラウザの挙動と、現場で「事故」を起こさないためのベストプラクティスについて深掘りします。

1. ブラウザは `content` をどう解釈しているのか？

まず知っておくべきは、CSSの `content` プロパティで挿入されたテキストが、「ドキュメントの構造（DOM）」には存在しないという点です。

ブラウザのレンダリングエンジンは、CSSOMを構築する過程で擬似要素を生成し、レンダーツリーに配置します。しかし、HTMLのパース段階ではそのテキストは存在しないため、JavaScriptから `querySelector` で直接テキストを操作することもできません。

特に注意すべきは「アクセシビリティツリー」への影響です。
多くのモダンブラウザにおいて、`::before`/`::after` 内のテキストはスクリーンリーダーで読み上げられます。つまり、「デザイン上の装飾のつもりで入れたテキストが、ユーザーの読み上げ体験を阻害する」という事態が起こり得るのです。

2. 「読み上げられていいもの」と「いけないもの」の境界線

ここが実務における最大の分岐点です。

読み上げさせるべき： CSSでアイコンを表現しているが、その意味がテキスト情報として不可欠な場合（例：必須項目の「」印など）。
読み上げさせるべきではない： 単なる装飾的な区切り線や、視覚的なアクセントのための記号。

もし、装飾目的でテキストを挿入する場合は、アクセシビリティツリーから除外することが推奨されます。しかし、残念ながら「擬似要素をスクリーンリーダーだけ無視させる」という直接的なCSSプロパティは存在しません（※ `speak: none` は廃止予定です）。

そのため、重要な原則は「CSSの `content` には、意味のある（読み上げられても支障のない）テキストのみを記述する」こと。これが守れないなら、CSSではなくHTML（``タグなど）でマークアップし、`aria-hidden=”true”` を付与するのが、最も堅実でプロフェッショナルな選択です。

3. 実践：現場で使える「アクセシブルな」実装例

それでは、実務でよく遭遇する「必須項目のラベル」を例に、CSSとHTMLをバランスよく活用した実装を見ていきましょう。

必須項目のラベル：
視覚的にはアスタリスクを添えるが、読み上げ時には「必須」と明確に伝える工夫

/
.is-required::after {
content: ” (必須)”;
color: #d32f2f;
font-size: 0.8em;
font-weight: bold;
/

補足：
contentの内容は、スクリーンリーダーによって「 (必須)」と読み上げられます。
これにより、ユーザーはラベルと必須判定をセットで理解できます。

/
}

装飾的な区切り：
読み上げさせたくない場合は、contentに空文字を指定し、
装飾はbackground-imageやborderで行うのがベストプラクティスです。

/
.divider::before {
content: “”;
display: inline-block;
width: 20px;
height: 2px;
background-color: #ccc;
vertical-align: middle;
margin-right: 8px;
/

装飾要素としてのみ機能させ、音声ブラウザには何も伝えないようにする

/
}

4. シニアエンジニアからのアドバイス

「CSSだけで完結させる」ことは、コードの行数を減らす手段にはなりますが、「HTMLが本来持つセマンティクス（意味構造）を破壊していないか？」という視点を忘れないでください。

コンテンツの重要度を測る： そのテキストは、CSSを無効化した状態でもユーザーに伝わるべきか？もしそうなら、CSSの `content` プロパティを使うべきではありません。
保守性を考える： 後から参画したメンバーが、「なぜこの文字が表示されているのか？」とデベロッパーツールで検索しても見つからない。この「隠れコンテンツ」は、大規模なプロジェクトほどメンテナンスコストを跳ね上げます。

CSSの擬似要素は非常に強力な武器ですが、アクセシビリティと保守性という「盾」を忘れずに使いこなしてください。コードは、自分だけでなく、未来の自分やチームのために書くものです。

今回の知見が、皆さんの次なる実装のヒントになれば幸いです。何か疑問があれば、現場の泥臭い議論を歓迎しますので、いつでもコメントしてくださいね。