※当サイトではアフィリエイト広告を利用しています

HTML / CSS

【CSS擬似要素】::before ::afterってなに？

 
【CSS擬似要素】::before ::afterってなに？

装飾でよく使われる::before, ::after擬似要素についてまとめてみたいと思います。

今回はデザインの作り方ではなく、
定義や要素が挿入される場所のちがい、書き方などについてまとめます。

クリックできる目次

::before ::afterってなに？

MDNでの説明

まずMDN web docsに掲載されている説明を見てみたいと思います。

CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

出典：MDN web docs ::before(:before)

CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

出典：MDN web docs ::after(:after)

定義がとても似ていますが、
「選択した要素の最初の子要素」「選択した要素の最後の子要素」のところが
::before、::afterというだけあってちがうポイントのようですね。

::before ::afterのちがい

擬似要素が挿入される場所が「最初」と「最後」とのことですが、
具体的にどこに挿入されるのか場所を確認していきましょう。

h2タグの中に「Hello World!」が入っている<h2>Hello World!</h2>を
例としてみていきたいと思います。

::before場合：

<h2>::before Hello World!</h2>

タグ内のコンテンツの前に挿入される。

::afterの場合：

<h2>Hello World! ::after</h2>

タグ内のコンテンツの後に挿入される。

最初と最後というのはタグの中のコンテンツ(この場合はHello World!)の中のはなしで、
h2タグそのものの前後に::before、::afterが入るわけではないというのが
少しややこしいですね。

コロンの数の疑問

チュートリアルなどをみていると、
:beforeや::beforeなどコロンが1つだったり2つだったり。

コロンの数で何かちがいはあるのでしょうか？
調べてみると、規格(CSS2、CSS3)の構文で書き方がちがうようです。

  • CSS 3→コロン2つ (::before / ::after)
  • CSS 2→コロン1つ (:before / :after)

メモ: CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::before の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :beforeも使用できます。

出典：MDN web docs ::before(:before)

::before ::afterの書きかた

書き方はデザインによって幅がありますが、以下のようになります。

h2::before {
  content: "";
  デザインに必要な他のプロパティ
}

::before、::afterには、contentプロパティが必要です。
contentプロパティの値にはいろいろなものが入れられます。

  1. 文字：
    例：content: “Hello”;
  2. 空でもOK！：
    書き方：content: “”;
    ただし空の場合でもcontentプロパティ自体は必要です！
  3. 画像：
    例：content: “url()”;

また::before、::afterはデフォルトでインライン要素になっているので、
デザインに応じてdisplayプロパティを変更する必要があります。

擬似要素を使いこなせるようになると作れるデザインの幅がぐんと広がりますね！

以上、::before, ::after擬似要素についてでした。

関連する記事