目次
:before :afterって何？？
すごく簡単に説明すると、htmlで記述してないけど、文字をcssのみで反映させたかったり
htmlで記述してないけど、ボックス要素を作りたかったり
htmlでは書いてないんだけど！！ってときに使う疑似要素！
html上にはないけどcssで作り出せる要素っていったほうが想像しやすいかもしれないですね。
CSSの擬似セレクタ:before:afterの使い方を見ていきましょう！
擬似要素:beforeの使い方
まずはサンプルコード
CSS
|
1 2 3 4 |
p:before { content: 'ここに追加されるのが' ; color:##FF0000; } |
HTML
|
1 |
<p>beforeです</p> |
ここに追加されるのがbeforeです
このように出力されます。
擬似要素:afterの使い方
:afterも使い方は同じです。ただ:beforeと違って<p></p>の後ろに追加されます。
CSS
|
1 2 3 4 |
p:after { content: 'ここに追加されます' ; color:##FF0000; } |
HTML
|
1 |
<p>afterは</p> |
afterはここに追加されます
HTMLファイルをすっきりさせて書きたい場合や、<p>や<li>の前や後ろにアイコンとして常に表示させたい時にとても便利です。
|
1 2 3 |
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
|
1 |
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> |
CSS
|
1 2 3 4 |
p:before { font-family: FontAwesome; content: '\f13d'; } |
このコードをコピペすればOK。