::beforeと:beforeはどっちが正しい書き方なんだっけ?

Advertisement

コロンが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つの記事がすごく勉強になりました。ありがとうございます。

他にもMDNの記事やWCAGの文書も参考になります。MDNさんにも、W3Cさんにも、CSS-Tricksさんにも感謝です。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です