【CSS】疑似要素afterとbeforeの使い方とは？実際のサンプルコードを用いて解説

CSSの要素名やクラス名の後に「:before」と「:after」という記述を見たことがあるかと思います。

いざ使おうと思っても、よく理解していなかったり、使いにくいと感じたりする方も多いのではないでしょうか。

今回は、CSSのbeforeとafterの使い方を知りたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのbeforeとafterが使いこなせるようになりますよ。

ぜひ最後まで読んでくださいね！

疑似要素beforeとafterとは？

CSSで使われるbeforeとafterは、疑似要素と呼ばれます。

HTMLでは、タグで囲うことで要素を作成できますね。疑似要素を使うことで、HTML内の要素のようなものを疑似的に作ることができるのです。

この後のメリットデメリットでも詳しく話しますが、HTMLに書くほどでもない装飾的な要素を作りたいときに利用します。

beforeとafterは以下のように記述します。

<h1>疑似要素の使い方</h1>

h1:before {
  content: "☆";
  color: skyblue;   /* スタイル指定ができる */
}

contentの中には、テキストや画像、音声など、挿入したいものを記入します。

beforeは、要素内のコンテンツの直前に疑似要素を追加します。

上記では、「☆疑似要素の使い方」と表示されますね。afterの場合はコンテンツの直後に追加されます。

z-indexを指定していない場合、beforeとafterは要素内のコンテンツの上に設置されます。

beforeとafterでは、afterの方が上に重なりますね。

疑似要素を使うメリットデメリット

疑似要素はHTMLの要素のようなものを作成できるということでした。

使うことでどのようなメリット・デメリットがあるのでしょうか？

疑似要素のメリット

疑似要素を使うメリットは、HTMLを使わずにcontentを挿入できるというものです。

装飾目的のものをHTMLで多く書いてしまうと、ごちゃついてしまいますよね。

HTMLのソースコードに影響しない書き方ができるのがポイントです。

検索エンジンはHTMLの記述をコンテンツの中身とみなすため、装飾をCSSでしておくことで、SEOに影響を与えないという利点もあります。

疑似要素のデメリット

HTMLソースと検索エンジンに影響を与えないという点は、メリットであるとともにデメリットにもなり得ます。

疑似要素で挿入するテキストに重要なキーワードが含まれていたとしても、検索エンジンは認識しません。

あくまで装飾目的での使用にとどめておく方が良いでしょう。

また、JavaScriptで要素を動かしたいときにも、HTMLで作成した要素の方が都合がいいことが多いです。

状況に応じて、疑似要素を使っていきましょう。

疑似要素beforeとafterのサンプル

使い方やメリットデメリットがわかっていただけたでしょうか？

ここでは、実際にbeforeとafterを使った例を2つ紹介していきます。

NEWアイコンを設置する

疑似要素の位置を指定して、NEWアイコンを設置する方法を紹介します。

新着記事やニュース、画像などに利用できますね。

<div class="new"><p>コンテンツの中身</p></div>

.new {
  position: relative;
  width: 250px;
  height: 150px; 
  background: #fff;
  border: 1px solid #333;
}
.new p {
  margin: 0;
  line-height: 150px;
  text-align: center;
  font-size: 16px;
  color: #333;
}
.new:after {
  content: "NEW";
  padding:5px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #ff6347;
  position: absolute;
  top: 0;
  left: 0;
}

コンテンツの左上に「NEW」というテキストが入った疑似要素を表示させることができました。

位置の指定にはpositionを使っています。

position: absolute;
top: 0;
left: 0;

という部分で左上に位置を合わせていますね。

要素全体を枠線で囲っています。

それ以外は、見やすいように要素内のテキストの大きさや位置を指定しています。

吹き出しを作る

疑似要素を使って吹き出しのしっぽの部分を作成します。

<div class="message"><p>吹き出しの中身</p></div>

.message {
  position: relative;
  background: #eee;
  width: 250px;
  padding: 20px;
  border-radius: 7px;
}
.message:before {
  content: '';
  border: 15px solid transparent;
  border-left: 15px solid #eee;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

テキストが書かれた要素の外側に、吹き出しのしっぽが表示されましたね。

このしっぽの部分は、枠線の一部を利用しています。

枠線を一辺だけ表示させ、残りを透明にすることで三角を作ることができます。

矢印アイコンを作るときなどにも活用できる方法なので、これを機に覚えておきましょう。

「top: 50%」は三角の上部の位置の指定であるため、最後の「transform: translateY(-50%)」で調整しています。

まとめ：疑似要素で様々な表現をしよう

今回は、疑似要素afterとbeforeの使い方について解説してきました。

メリットデメリットについても紹介しましたね。

サンプルコード以外にも、様々な場面で役立つ便利な指定なので、どんどん使っていきましょう。

今回の記事が参考になれば幸いです。