CSS 擬似要素before/after意味と使い方を解説

CSS

【CSS擬似要素】::before ::afterの意味と使い方・活用例

今回はCSSの擬似要素::before、::afterの使い方を解説します。

「CSSで吹き出しデザインを作りたい」「リストの先頭に好きな画像を表示させてオリジナルデザインのリストを作成したい」といった際に擬似要素::before、::afterを使うと非常に便利です。

この記事を読むと分かること

  • 擬似要素before、afterの基本について
  • 擬似要素before、afterの書き方について
  • 擬似要素before、afterを使用するメリットについて
  • 擬似要素before、afterの様々な活用例について
  • 擬似要素before、afterの違いについて

 

 

擬似要素before、afterとは?

before、afterは要素の一部に対してのみCSSを効かせることができる「擬似要素」と呼ばれるものの1つです。

これを使うとCSSで対象となる要素の内側に子要素として擬似的な要素を追加することができるようになります。

■(参考)Google Chromeの検証画面で擬似要素before、afterを確認Google Chromeの検証画面で擬似要素before、afterを確認している例

例えば上の例では、h1タグで囲っている箇所は「ここにタイトルが入ります」と書かれた部分だけですが、擬似要素before、afterを使ってこちらの前後に「before」「after」といったテキストを追加しています。

なおbeforeとafterの違いについては、擬似的な要素を追加する位置が異なるという点で、beforeは対象となる要素の直前に要素を追加できるのに対し、afterは直後に要素を追加できます。

擬似要素before、afterの違い

擬似要素before 要素の直前に擬似的な要素を追加することができる。
擬似要素after 要素の直後に擬似的な要素を追加することができる。

 

擬似要素before、afterの書き方

ここからは実際に擬似要素before、afterの書き方を紹介していきます。

擬似要素before、afterを使いたい場合は、CSSセレクターの後ろにコロン(:)を2つ書いてから「before」「after」のように記述します。

そして、contentプロパティの値に追加したいテキストをクオーテーションマークで囲って入力してあげればOKです。

擬似要素before、afterの使い方を説明している図。

擬似要素beforeの使用デモ。

上の例では、擬似要素beforeを使って「before」というテキストを要素の直前に入力しています。

また、テキストの追加だけでなく画像を追加することも可能で、その場合はcontentプロパティの値に「url(画像のパス)」といった形で入力してあげます。

擬似要素before、afterの使い方(画像の追加)を説明している図。

擬似要素beforeの使用デモ(画像の追加)。

なお、特に挿入したいテキストや画像がないといった場合でも、スタイリング目的で擬似要素before、afterを使用する際は必ずcontentプロパティを指定する必要があるので、その場合は値を空(クオーテーションマークのみ)にしてcontentプロパティを指定しましょう。

擬似要素beforeの使用デモ(追加したいテキストや画像がない場合)。

 

擬似要素before、afterを使用する上でのポイント

  • 要素の前後にテキストを追加したい場合は、セレクタの後ろに「::before」「::after」と記述し、contentプロパティの値に追加したいテキストをクオーテーションマークで囲って入力する。
  • 要素の前後に画像を追加したい場合は、セレクタの後ろに「::before」「::after」と記述し、contentプロパティの値に「url(画像のパス)」といった形で入力する。
  • 特に挿入したいテキストや画像がない場合でも、スタイリング目的で擬似要素before、afterを使用する際は必ずcontentプロパティを指定する必要があるので、その場合は値を空(クオーテーションマークのみ)にしてcontentプロパティを指定する。

 

擬似要素before、afterを使用するメリット

擬似要素before、afterの使い方に説明しましたが、「前後にテキストを追加したいだけなからわざわざ擬似要素beofre、afterを使わないで、直接HTMLタグ内に要素を書いておいたら良いのではないのか?」と疑問に思われる方もいるかもしれません。

擬似要素before、afterの大きなメリットは「HTMLの記述を増やすことなくCSS側から様々な表現ができる」という点です。

詳しくは後述しますが、たとえば、下記のような吹き出しやNEWアイコンをbeforeやafterで記述することができます。
活用例⑤: 吹き出しを作る

活用例②: NEWアイコンを作る

特定のclass名がついているものの前にだけ『NEW』と付けたいや吹き出しをつけたい、といったことができ後々一括で消すといったことも簡単にできるので、このようなレイアウトの場合擬似要素の方が管理がしやすいといったメリットもあります。

 

擬似要素で挿入した文字は検索エンジンにインデックスされない

擬似要素で挿入した文字は検索エンジンにインデックスされないという特徴があります。

下記例では、本語の「アバウト」のみをh1タグで囲い、英語の「ABOUT」に関しては擬似要素afterを使用して表示させた例ですが、

検索エンジンはafterで書いた英語文字に関しては通常のHTML上のテキストとしては認識しないという特徴があります。

日本語タイトルの見出しの下に英語タイトルが表示されている例

ですので、検索エンジン上のテキストや画像として認識させたい場合は擬似要素ではなくHTML要素で記述する方がおすすめです。

 

擬似要素before、afterの様々な活用例

次に、擬似要素before、afterの様々な活用例を紹介します。

今回は下記の5つの擬似要素before、afterの活用例をご紹介します(※コードの例は説明用のサンプルのためあくまで簡単な記述しています)。

■擬似要素before、afterの様々な活用例

  • 活用例①: 見出し下などに英字を表示する
  • 活用例②: NEWアイコンを作る
  • 活用例③: リストマーカーに好きな画像を表示させる
  • 活用例④: 文章を記号で囲う
  • 活用例⑤: 吹き出しを作る

 

活用例①: 見出し下などに英字を表示する

活用例①: 見出し下などに英字を表示する

こちらの例では擬似要素afterを使って、要素の直後に「ABOUT」といった英文字を入力していますが、ポイントはdisplayプロパティを使用して擬似要素afterをブロックレベル要素に変換しているという点です。

擬似要素before、afterを使って生成された擬似的要素はデフォルトではインライン要素の性格を有する為、テキストが改行されませんが、これをブロックレベル要素に変換することで日本語文字と英語文字の間に改行が入るようにしています。

 

活用例②: NEWアイコンを作る

活用例②: NEWアイコンを作る

こちらの例では「NEW」と書かれたテキストを擬似要素を使用して表示させ、対象となる要素には「position: relative;」、擬似要素に対しては「position: absolute」を指定することで、擬似要素で追加したテキストを任意の位置に配置しています。

このように擬似要素に対してpositionを使用することはよくあります。

 

活用例③: リストマーカーに好きな画像を表示させる

活用例③: リストマーカーに好きな画像を表示させる

こちらの例ではliタグにデフォルトで付いているリストマーカーを非表示にしておき、代わりに擬似要素beforeを使用して準備しておいた画像を表示しています。

なお補足ですが、画像ではなく「Font Awesome」などで使用できるアイコンフォントを疑似要素で表示させることもできます。

擬似要素before、afterでFont Awesomeを使用する方法についてはここでは解説しませんが、「Font Awesome アイコンフォント」などで検索すると、設定方法を説明しているブログ記事がたくさんありますので参考にされると良いと思います。

 

活用例④: 文章を記号で囲う

活用例④: 文章を記号で囲う。

こちらの例では擬似要素before、afterの両方を使用することで、要素の前後に鉤括弧を表示させています。

 

活用例⑤: 吹き出しを作る

活用例⑤: 吹き出しを作る

こちらの例では擬似要素beforeを使用することで、吹き出しの三角の部分を作成しています。

なおこちらではレイアウト目的で擬似要素beforeを使用している為、contentプロパティの値は空になっていることに注意して下さい。

この例のように特に追加したいテキストがない場合でもcontentプロパティの指定は必須ですので、忘れないようにしましょう。

 

 

まとめ・知っておくと便利な擬似要素before、afterの使い方!

まとめです。今回は擬似要素before、afterの使い方についてを紹介しました。

擬似要素before、afterを使用する上でのポイント

  • 要素の前後にテキストを追加したい場合は、セレクタの後ろに「::before」「::after」と記述し、contentプロパティの値に追加したいテキストをクオーテーションマークで囲って入力する。
  • 要素の前後に画像を追加したい場合は、セレクタの後ろに「::before」「::after」と記述し、contentプロパティの値に「url(画像のパス)」といった形で入力する。
  • 特に挿入したいテキストや画像がない場合でも、スタイリング目的で擬似要素before、afterを使用する際は必ずcontentプロパティを指定する必要があるので、その場合は値を空(クオーテーションマークのみ)にしてcontentプロパティを指定する。

また本記事の後半部分では擬似要素の活用例として合計5つの活用例を紹介しましたが、実際にはもっと様々な場面で使用されています。

まずは基本的な使い方をマスターして、その後で応用的な使い方を1つ1つ学ばれていかれると良いと思います。

なお、HTMLの使い方基本を「【HTMLの基本を徹底解説!】初心者向けHTMLの基本とよく使うタグ一覧」、CSSの基本を「【CSSの基本】CSSの基本とプロパティ一覧」に記載していますので、HTML・CSSの勉強をしたい方は合わせてご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

 

合わせて読みたい記事

これからサーバー・ドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

おすすめのレンタルサーバーについては「【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS