BLOG

【CSS】擬似要素を理解しよう!::beforeや::afterの使い方

2022/03/22


「擬似要素」という言葉から何を思い浮かべますか?
コーディングをしたことがある方が最初に思い浮かぶのは、やはり::beforeや::afterではないかと思います。
実際に案件で使用する擬似要素は、::beforeや::afterがほとんどです。
ですが擬似要素について調べてみたところ、様々な種類の擬似要素に出会いました。
ということで今回は、擬似要素の基本的な使い方と実務で使えそうな擬似要素の紹介、そして擬似要素でできることを紹介します。
ぜひ、最後までご覧ください!

擬似要素とは

指定した要素の特定の部分にスタイルを付けられるものです。
CSSで擬似的に要素が作成されるので、HTMLを操作せずに要素を追加できます。
擬似要素と似ている擬似クラスというものもあるのですが、指定方法が若干違うようです。

擬似要素二重コロン (::)
擬似クラス単一コロン (:)

擬似クラスについて気になった方はこちらの記事をご覧ください。

【CSS】擬似クラスを使いこなそう!:not()や:nth-child()の使い方

擬似要素の使い方

基本的にセレクタ(ID,タグ名,クラス名など)::擬似要素名と記述します。

また、SCSSではこのように記述できます。

::beforeまたは::afterを指定する場合、必ずcontentを指定する必要があります。
テキストや記号を擬似要素として挿入したい場合は、content内に記述してください。
テキストや記号以外の要素や画像を挿入したい場合は、contentを空(content: "";)にします。
そして、擬似要素にposition: absolute;を、擬似要素を付けた要素にposition: relative;を指定する必要があります。

擬似要素の種類

擬似要素といえば、::before や ::after を思い浮かべると思います。
ですが、実は擬似要素にはさまざまな種類があります。

::after選択した要素の最後の子要素
::backdrop全画面モードでの余白カラー
::before選択した要素の最初の子要素
::first-letterブロックレベル要素の最初の行の最初の文字にスタイルを適用
::first-lineブロックレベル要素の最初の行にスタイルを適用
::markerリスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択
::part()一致する part 属性を持つシャドウツリー内の要素
::placeholderinput または textarea 要素のプレイスホルダー文字列
::selectionユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用
::slotted() HTML テンプレート内にあるスロットに配置された任意の要素

参考 : 擬似要素 (Pseudo-elements) – CSS: カスケーディングスタイルシート | MDN

このようにたくさん種類があります。
この中から実務で使えそうなものをピックアップしてみました。

::after(::before)

選択した要素の最後の子要素(::beforeの場合、最初の子要素)として擬似要素が作成されます。

真ん中の黒い丸が擬似要素です。

擬似要素の記述が成功すると、検証ツールではこのように出力されます。

擬似要素を指定したのに表示されないときは、検証ツールで出力されているか確認してみてください。
もしされていなければ、CSSの記述方法に問題があるかもしれません。
まずは以下が指定されているか確認してみると良いと思います。

::after, ::before 指定の注意点

::backdrop

全画面表示の時の余白部分のカラーを調整できます。
たとえばvideoタグで設置したMP4のデフォルト状態を見てみましょう。

画面幅に合わない余白部分は黒く表示されるのがデフォルトです。
ですが、::backdropでカラーを指定すると背景色を変更できます。

このように指定すると…

背景色を変更できました!

::first-letter

指定した要素の1文字目のテキストのスタイルを変更できます。
使う機会はそう多くはないと思いますが、知っておきたい擬似要素の1つですね。
フォント指定系のCSSはひととおり使えると思います。

最初のテキストだけスタイルを適用できます。

::first-line

指定した要素の1行目のテキストのスタイルを変更することができます。
::first-letterと似ていますが、こちらは最初の1行目にだけスタイルが適用されます。

最初の行だけスタイルを適用されます。
2行目以降は適用されません。
2行目以降は適用されません。

::marker

list-styleを指定したときに表示される要素のスタイルを変更します。

  • リスト
  • リスト
  • リスト
  • リスト

::placeholder

inputまたはtextareaのプレイスホルダーのスタイルを変更できます。

::selection

ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用できます。
デフォルトだと背景が青、文字色が白です。
サイトの雰囲気に合わせて細かいところまでこだわりたい!という方は、ぜひ指定してみると良いと思います。

選択すると背景とテキストが紫になります

擬似要素でできること

様々な種類の擬似要素を紹介しました。
実務で一番使うのは、やはり::beforeや::afterです。
そのため、::beforeまたは::afterを実際にどのように使っているのか紹介します。

アイコンを設置する

擬似要素でのアイコンの設置方法を紹介します。
以下のボタンでの擬似要素はメールのアイコンです。

ポイントはbackground-sizeを100%にしていることです。
指定することにより、widthやheightで指定した通りにサイズを変更できるようになります。

こちらの方法はとてもよく使うので、ぜひ挑戦してみてください。

要素の前後に文字を追加する

擬似要素のcontentにテキストを入れると、指定した位置にテキストが挿入されます。

テキストの前後に記号を置けます

また、他プロパティと併用するとさらに実用的になります。

要素の数をカウントする

counter-incrementというプロパティを併用すると、動的に要素の数をカウントしてくれます。

  • カウントします
  • カウントします
  • カウントします
  • カウントします
  • カウントします
  • カウントします

CSS側で自動的にカウントされるので、動的なコンテンツでも問題なく使えます。

背景を設置する

要素の背景は指定されたカラーをCSSに記述するか、背景画像を設置することが多いです。
しかし、片側だけ画面幅いっぱいの背景斜めになっている背景のデザインを頂くこともあります。
そんな時に使用したいのが、やはり擬似要素です。

  1. 片側だけ画面幅いっぱいの背景
  2. 斜めになっている背景

片側だけ画面幅いっぱいの背景

片側だけ画面幅いっぱいの背景という言葉だけではイメージがつきにくいですよね。

このように片側だけインナー幅を飛び出ている背景です。
少々複雑なので順を追って説明していきます。

まずはHTMLと擬似要素を指定する準備のCSSを記述します。

現時点ではこのような感じです。

次に、テキストに背景を指定しましょう。
余白等はデザインに合わせてください。

上記をCSSに追記すると、

このようになります。

最後に擬似要素でインナー幅をはみ出ている部分を作成しましょう。

ポイントが下記2点です。

  • インナーブロックより外の要素に擬似要素をつける

    画面幅いっぱいを実現するため

  • height: 100%;

    中のテキストに合わせて背景を伸縮させるため

  • 擬似要素にz-index: -1;をつける

    背景をテキストの下にするため
    また、擬似要素を付けた要素に-1より大きい値のz-indexを指定してください

コードをCSSに追記したら完成です!
擬似要素の背景色をわかりやすく青色に変えてみました。
インナー幅を飛び出ている部分が擬似要素ということがわかりますね。

すべて記述されているコードはこちらです。

斜めになっている背景

このように斜めになっている背景の作成方法を紹介します。

意外によく使うので、ぜひ覚えておくと良いと思います。
こちらもやや工程が多いので、順を追って説明します。

まずはHTMLとベースとなるグレーの背景を指定していきます。

このようになります。

次に、斜めの部分以外の背景を作成します。

このようになります。
widthは斜めの部分の太さや角度に合わせて適宜調整してください。

最後に斜めの部分を作成します。

こちらをCSSに追記して完成です!
斜めの要素を作成するにはさまざまな方法があると思いますが、今回はtransform: skewX()を使用しました。
要素を指定した方向にゆがませるプロパティです。
気になった方がこちらをご覧ください。

skewX() – CSS: カスケーディングスタイルシート | MDN

すべて記述されているコードはこちらです。

まとめ

今回は擬似要素について紹介しました。
使用方法などに決まりがあるので戸惑うかもしれません。
ですが、特に::beforeや::afterはコーディングをする上では絶対に必要な知識だと思います。
ボタンのアイコンを擬似要素で指定してみるなど、少しずつ慣れていただければと思います。
以上、最後までご覧いただきありがとうございました!

FOLLOW US