CSSの擬似要素beforeとafterとは?使い方を徹底解説

こんにちは!ライターのナナミです。

みなさんWEBサイトを作っていて、

ここにアイコンを入れたいけど今からHTMLをいじるのはめんどくさい…

なんてことはありませんか?

今回はそんなときに便利な擬似要素、beforeafterについてまとめました!

この記事は下記の流れで解説していきます。

【基礎】擬似要素とは何か
【基礎】擬似要素の使い方
【発展】擬似要素の使用例
【発展】メリット・デメリット

擬似要素を使えると、コーディングだけでなくソースの管理もとっても楽チンです。
ぜひ覚えて、活用できるようになりましょう!

要素を追加する「擬似要素」とは?

擬似要素とは、HTMLの要素を擬似的にCSSで設定できるものです。
HTMLに書くほどでもない、要素の装飾などをしたいときなどによく使われています。

擬似要素は主にbeforeafterの二種類があります。
それぞれ細かく見ていきましょう。

before

指定した要素の最初に要素が追加されます。

giziyoso1

イメージ的には下記のHTMLのようになる感じですね。

HTML

after

指定した要素の最後に要素が追加されます。

giziyoso2

beforeと違い後ろにつくので、下記のHTMLのような感じになります。

HTML

beforeとafterの使い方

擬似要素はなんと2ステップで使うことができます、簡単!
では細かく見ていきましょう。

擬似要素を作成する

まずは擬似要素の指定自体を作成します。

擬似要素を入れたい要素のセレクタの後ろに::beforeまたは::afterと入れるだけです。
セレクタと擬似要素指定の間は:(コロン)が2つということだけ注意しましょう。

CSS

擬似要素の中身を指定して実体化

指定を作成しても中身がないので、画面上には何も表示されません。
contentを指定することで、擬似要素を実体化させることができます。

下記のように記述し、「’(クォート)」の中に入れたい文字を入れればOKです。

CSS

contantプロパティのリファレンスはこちら
http://www.htmq.com/style/content.shtml

実際に使ってみると…

giziyoso3

HTML

CSS

文字が表示されましたね!

画像を表示する

contentには画像を指定することもできます
backgroundと同じように、下記のように記述するだけです。

CSS

画像の指定ができれば、こんな感じでアイコンをつけることができます。

giziyoso4

HTML

CSS

ただし、この方法ではアイコンの大きさや位置を調整することができません
そこがちょっと不便ですね…

空白の要素を作る

ちょっとした装飾を作りたい時などは、別に要素の中身がいらないなんて時もありますよね。

そんな時は、content「’(クォート)」の中身を空にすれば、空白の要素を作ることができます。

CSS

下記のように装飾する時なんかに便利ですね。

giziyoso5

HTML

CSS

空白要素、結構使いどころが多いので、ぜひ覚えておいてください!

beforeとafterの使用例

beforeafterが使えるポイントは、要素の追加だけに止まりません。
色々な例を挙げてみたので、参考にしてみてください!

リストの頭にアイコンをつける

giziyoso-ex1

HTML

CSS

content自体で画像を指定するのではなく、背景として指定しています。
画像サイズを調整できるので、かなり使えるテクニックです。

こんな感じでリストを装飾するのも簡単、便利ですね。

画像の端にNEWマークをつける

giziyoso-ex2

HTML

CSS

投稿画像のNEWマークだってお手の物。
position:absoluteを使って、画像と重なるようなレイアウトにしてみました。

position:absoluteの詳細はぜひ下記の記事をご覧ください。

要素を装飾する

giji2

HTML

CSS

ちょっと装飾を追加したいけど、HTMLを修正するほどでも…
なんて時でも、擬似要素ならサクッと解決!

こんな感じの二重線も、擬似要素で実装することができます。

詳しくは下記の記事をご覧ください。

clearfixとして使う

clear_clearfix

HTML

CSS

要素を横並びにするfloat、みなさんよく使いますよね。
floatのレイアウト崩れに悩まされている方も多いのではないでしょうか?

そんな時も擬似要素!
clearfixという記述を使えば、floatの問題も綺麗に解決してくれます。

詳細は下記の記事をご覧ください。

擬似要素のメリット・デメリット

擬似要素、とっても便利ですね。
ただ、メリットばかりでなくデメリットも存在しています。

メリット

●後から追加できる
●classで管理できる
●HTMLソースに影響しない

やはり後から追加ができるのは便利ですよね。
CSSなので、同じclassを付けていれば一括管理できるのも魅力です。

さらに、HTMLのソースへの記述ではないので、HTMLがスッキリするのも意外と助かるポイントです。

デメリット

●HTMLソースに影響しない
●jQueryなどの対象にできない

HTMLに影響しないのはメリットでもあり、デメリットでもあります。

ちょっと小難しい話ですが、検索エンジンは擬似要素の中に書いてある文字はコンテンツとして見ていません。
重要なキーワードなどを擬似要素にしてしまうと、検索エンジンはそのキーワードをスルーしてしまうので、注意しましょう。

また、擬似要素はjQueryなどで要素を動かしたりする時に対象として選ぶことができません。
jQueryを使いたい要素は、HTMLにきちんと書くようにしましょう。

まとめ

いかがでしたか?
ちょっとだけ癖はありますが、使いこなせるとかなり便利な指定方法です。

もちろん今回紹介した使用例だけでなく、様々な使い方ができます。
ぜひどんどん試して、素敵なWEBサイトを作ってくださいね!

未経験者でも安心の徹底サポート!まずは完全無料の体験レッスン!

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

cta_mtm1

LINEで送る
Pocket

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説