::after ::before 擬似要素の基本から実際の使い方まで１から理解しよう
疑似要素ってありますよね。僕は技術書で初めて見ました。
最初見た時、「え、なんだ、これ？」って思いませんでしたか？
ですが覚えると、とっても便利なのでさっそく使いこなしましょう！
擬似要素とは
MDNのガイドラインには、下記のように書いてあります。
疑似要素 (英：Pseudo-elements) はセレクタに追加して記述するものですが、:after の様な、特別な状態を記述するだけのものではありません。疑似要素は、ドキュメントの特定のパーツをスタイル付けします。例えば ::first-line 疑似要素は、セレクタで指定された要素の最初の行だけを対象にします。
構文
selector:pseudo-element { property: value; }
定義上は上記のようになります。平たく言うと
::before ::afterを使用すると、指定要素（divタグなど）の前後にテキストやアイコンを挿入することができ、HTMLコード上は存在させず擬似的にスタイルをあてることができます。
ということです。
beforeとafterの関係はなんとなくわかりますよね
- ::before は擬似要素内の最初に配置され
- ::after は擬似要素内の最後に配置されます
画像引用：参考書籍 HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 p103
つまりは、こんな関係でしょうか。
豆知識
CSS2までは「:before」のようにコロンが１つだったのですが、CSS3になってからは、擬似要素は「::before」というようにコロンを２個付けるようになりました。理由は、擬似要素と擬似クラスを区別するためです（擬似クラスは以前と同じく:は一つで記述します）。
では、擬似クラスとは？
例を示すとわかるかと思います。よく使われる疑似クラスは以下の3つですかね。
- a:link{ }
- a:hover{ }
- a:visited{ }
最も有名なのが、おなじみの aタグ ではないでしょうか。
またnth-child(n)も覚えておくとなにかと便利ですね。これは、以前書いたnthとかも擬似クラスなので、見てみてください！
pbrsk.hatenablog.com
疑似要素で出来ることとは？
ざっくり言うと以下の３つです。
- 前後に何かくっつける...（::before や ::after）
- リストの装飾で特定行だけ指定できる...（::first-letterとか）
- floatの解除（いわゆるclearfixですね）
２番目の、「リストの装飾で特定行だけ指定できる」に関しては、参考になるリンクがありますので、そちらをご確認ください。
wp.yat-net.com
３番目の、「floatの解除」に関しても、以前のブログをご確認ください。
pbrsk.hatenablog.com
ということで、今回は「前後に何かくっつける」だけを見てみましょう。
前後に何かくっつける
擬似要素を正しく理解し、使い方をマスターするためには多くの実例を自分で実装するのが一番だと思います。
また、疑似要素の種類は多くありますが、デザインで使えそうなモノは、まずは::beforeと::afterではないでしょうか。
そして、::beforeと::afterの場合、擬似要素を存在させるためには、CSSで擬似要素の中身を指定するcontentプロパティの指定が必要です。
ということで実例を見てみましょう。
:beforeと:afterで具体的にデザインできること
実装例1_文字を前後に入れる
before と after の基本的な使い方というのは、単純に、指定した場所の前後に好きな文字を挿入することです。まずは例としてこんな文章を用意しました。HTMLもただ単にpタグを入れているだけです。
See the Pen 20160816pseudo-elements_1 by r.shimizu (@r_shimizu) on CodePen.
まさに、これでしょ！？
ちなみに、擬似要素で生成されたtextは、ホバーしてもtextとして認識されません。PCで見てる方は、code penのやつで試してみてください。
普通のtextとは違って文字として認識されないので、Googleからも認識されません。
重要なキーワードをここに入れてもSEO的には意味ないので、注意してくださいね。
とはいえ、擬似要素を使うメリットは装飾をCSSで出来るだけでなく、見た目を再現するためだけの空のdivなどHTMLの文章構造上は不要なタグを無くし、綺麗で見やすいHTMLを保つことができるというマークアップ的な利点があります。なので、装飾的なtextや画像やその他のデザインを追加したい場合に、擬似要素はもってこいなのです。
この擬似要素を利用して、前後に画像を入れることも可能です。
例はこのリンクをご覧ください
[CSS] 擬似要素「before」「after」の基本から使い方までを徹底紹介!! | ヨッセンス
便利な擬似要素 ::before と ::after ですが、できないこともあります。
1つは、画像の大きさを変更すること、
もう1つは、出現させた画像やテキストにaタグを付けてリンクを貼ることはできません。
あくまで実態のないモノという位置づけということですね。
実装例2_吹き出しを入れる
代表的なサンプルを実装してみましょう。
吹き出しの下の三角形は擬似要素で生成されています。
See the Pen 20160816pseudo-elements_2 by r.shimizu (@r_shimizu) on CodePen.
この青い部分が擬似要素で生成された部分です。
なぜ、borderで指定してるだけなのに三角形ができるのかわからなかったのですが、これを見て超勉強になりました。
liginc.co.jp
また、::before ::after擬似要素のdisplayプロパティのデフォルトはインラインです。なので、高さや幅を指定したい場合には、displayプロパティにblockやinline-blockの指定が必要です。
さいごに
疑似要素でできることは、画像を使ったりJavaScriptで実装してしまえばできてしまうので、ちゃんと理解する機会はそんなに無いかと思います。
ですが、理解さえしていれば効率的なコーディングができる場面もあると思いますので、この際に是非覚えておくといいかと思います。
