コロンが1つだったか2つだったか定期的に不安になるので、しっかり覚えるために::beforeと:beforeの違いをメモっておきます。
ややこしくて、なんか覚えられないんですよね。トホホ…
目次
以下はページのセクション内へのリンクです。
短い答え
::beforeはCSS3の構文:beforeはCSS2の構文
ということで、CSS3の::beforeを使う。
ていうか、そっちが推奨されてます。
以上です😎
ほんとにダブルコロンのほうでいいの？
その昔、CSS2しかサポートしない古いブラウザ（IE8以下）対応のためにシングルコロンの:beforeを使うこともあったようですが、2020年8月現在でIE8のサポートが必要なことって、もうないですよね？あるのかな？ないですよね？
シングルコロンの:beforeは最新のブラウザでもサポートされていて使えますが、特異な理由でIE8をサポートするなどでないかぎり、ダブルコロンで記述するのが良さそうです。
そもそも、2つのコロンで記述する擬似要素と1つのコロンで記述する擬似クラスを区別するために、CSS3で::beforeが導入されたそうです（MDNの記事中のメモ を参照）。
- ダブルコロンは擬似要素
- シングルコロンは擬似クラス
しっかり区別して覚えられるように、ダブルコロンの::beforeを使うのが良さそうですね。
ダブルコロンの他の擬似要素
::beforeや::afterの他にも以下のような擬似要素があります。
| 擬似要素 | 説明 |
|---|---|
| ::first-letter | ブロックレベル要素の最初の行の最初の文字にスタイルを指定できる |
| ::first-line | ブロックレベル要素の最初の行にスタイルを指定できる |
| ::selection | 選択したテキストのスタイルを指定できる |
覚えておくとデザインにちょっとした工夫を盛り込みやすくなりますね。
擬似要素と、contentプロパティと、アクセシビリティと
せっかくなので、::beforeと::afterのような擬似要素とアクセシビリティについてもちょっとだけ書いておきます。
擬似要素の::beforeや::afterとCSSのcontentプロパティを使うと指定した要素内にコンテンツを挿入できるわけですが、挙動をよく理解して使わないと思わぬ落とし穴がありそうです。
そもそも、Webアクセシビリティ・ガイドラインのWCAGでも擬似要素の装飾以外の目的での使用は非推奨としています。なので、本来HTMLに記述すべき情報を擬似要素を使って挿入するのは問題外として、装飾目的で使う場合でもいくつか注意したほうが良さそうです。
擬似要素とcontentプロパティで挿入したコンテンツの特徴
::beforeと::afterのような擬似要素とcontentプロパティを使って挿入したコンテンツ（または生成されたコンテンツ）には以下のような特徴があります。
1. CSSをオフにすると表示されない、アクセスできない
CSSで挿入してるんで、そりゃそうですよね。
表示されなくなることで情報の理解を妨げるようなら、使い方を見直したほうが良いです。
2. 多くのスクリーンリーダーで読み上げられる
実は僕は擬似要素を読み上げないスクリーンリーダーが結構あるのかと思ってたんですが、逆のようです。なので、読み上げられることで意味不明になる、もしくはわかりづらくなる使い方をしないように注意が必要です。
3. 選択できないのでコピペできない
テキストとして選択できるようにしたいコンテンツをCSSで挿入するようなことはないと思いますが。一応、挙動としてこんな特徴もあります。
参考になる記事
以下の4つの記事がすごく勉強になりました。ありがとうございます。
- before, after 擬似要素の使いどころを改めて考える。 – Qiita
- 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて
- Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて | 覚え書き | @kazuhito
- Re: 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについての追補 – 水底の血
他にもMDNの記事やWCAGの文書も参考になります。MDNさんにも、W3Cさんにも、CSS-Tricksさんにも感謝です。
- ::before (:before) – CSS: カスケーディングスタイルシート | MDN
- 疑似要素 (Pseudo-elements) – CSS: カスケーディングスタイルシート | MDN
- ::before vs :before | CSS-Tricks
- F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the ‘content’ property in CSS | Techniques for WCAG 2.0
- CSS Generated Content Module Level 3
2020年8月5日に公開された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。