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

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

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

擬似要素before、afterとは？

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

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

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

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

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

擬似要素before、afterの書き方

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

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

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

<h1>ここにタイトルが入ります</h1>

h1::before {
  content: "before";
  color: red; /* 擬似要素beforeで追加した要素の色を変える為に指定しています。 */ 
}

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

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

<h1>ここにタイトルが入ります</h1>

h1::before {
  content: url(img/check.png);
}

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

<h1>ここにタイトルが入ります</h1>

h1::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid red;
  border-radius: 50%;
}

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

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

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

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

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

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

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

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

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

<h1>アバウト</h1>

h1{
  text-align: center;
}

h1::after{
  content: "ABOUT";
  display: block;
  font-size: 16px;
  color: #666;
}

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

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

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

<div class="new"></div>

div{
  width: 400px;
  height: 300px;
  background-color: #ccc;
}

.new{
  position: relative;
}

.new::before{
  content: "NEW";
  padding: 5px 10px;
  background-color: orange;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
}

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

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

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

<ul>
  <li>ここにテキストが入ります</li>
  <li>ここにテキストが入ります</li>
  <li>ここにテキストが入ります</li>
</ul>

ul{
  list-style-type: none;
}

li{
  font-size: 30px;
}

li::before{
  content: url(img/check.png);
}

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

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

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

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

<h1>ここにタイトルが入ります</h1>

h1:before{
  content: '『';
  color: orange;
}

h1:after{
  content: '』';
  color: orange;
}

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

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

<div class="fukidashi">ここにテキストが入ります。</div>

.fukidashi{
  max-width: 300px;
  padding: 30px 0;
  text-align: center;
  position: relative;
  background-color: #ccc;
  margin-left: 30px;
}

.fukidashi::before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  background-color: #ccc;
}

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

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

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

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

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

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

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

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

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

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

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

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

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