【超便利!!】「:before」「:after」の基本的な使い方。画像やfontawesomeも挿入

2016/7/20 CSS

:before :afterって何??

すごく簡単に説明すると、htmlで記述してないけど、文字をcssのみで反映させたかったり
htmlで記述してないけど、ボックス要素を作りたかったり

htmlでは書いてないんだけど!!ってときに使う疑似要素!

html上にはないけどcssで作り出せる要素っていったほうが想像しやすいかもしれないですね。

CSSの擬似セレクタ:before:afterの使い方を見ていきましょう!

擬似要素:beforeの使い方

まずはサンプルコード

CSS

HTML

と記述すると

ここに追加されるのがbeforeです

このように出力されます。

擬似要素:afterの使い方

:afterも使い方は同じです。ただ:beforeと違って<p></p>の後ろに追加されます。

CSS

HTML

と記述すると

afterはここに追加されます

HTMLファイルをすっきりさせて書きたい場合や、<p><li>の前や後ろにアイコンとして常に表示させたい時にとても便利です。

このように画像もはることもできます。

Font Awesomeのアイコンも:before/:afterで挿入

Font Awesome, the iconic font and CSS toolkit : http://fontawesome.io/

Font Awesomeのアイコンも:before:afterで挿入可能です。
まずHTMLの<header>内に

HTML

そしてCSSで

CSS

と記述します。’\f13d’はどこのコードかというと

fa anchor Font Awesome Icons

このコードをコピペすればOK。

投稿者:気まぐれWEBLOG管理人