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

:before :afterって何？？

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

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

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

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

擬似要素:beforeの使い方

まずはサンプルコード

CSS

p:before {
      content: 'ここに追加されるのが' ;
      color:##FF0000;
}

HTML

<p>beforeです</p>

と記述すると

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

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

擬似要素:afterの使い方

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

CSS

p:after {
      content: 'ここに追加されます' ;
      color:##FF0000;
}

HTML

<p>afterは</p>

と記述すると

afterはここに追加されます

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

p:after {
	content: url("../img/画像ファイル名") ;
}

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

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

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

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

HTML

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

そしてCSSで

CSS

p:before {
	font-family: FontAwesome;
	content: '\f13d';
}

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

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