疑似要素「before」「after」の使い方とできること

①疑似要素の「before」「after」とは

疑似要素の「before」「after」っていうのは、名前の通りで、指定した部分の直前や直後に好きな文字や画像を導入することができます。例えば、今日はねむい、っていうようなタイトルがあるとします。そして「今日はねむい」っていうタイトルの直前に、【注目！】っていう文字を付けたいとします。こういう時に「before」を使うんです。

●html
[h1]今日はねむい[/h1]
●css
h1:before{
content:”【注目！】”;}

こんな感じで指定した部分の直前（上の場合h1）に好きなテキストを入れる事ができます。でもわざわざbeforeを使わなくても、 h1に直接入力すれば良くない？って思いますよね。なぜここで使ったかというと、疑似要素のbeforeとafterで入力した文字は検索エンジンに認識されないからです。（単純に例としてわかりやすかった、ていうのもありましたけど）つまり装飾などで使うまったく関係ない文字を入力しても、 okという事です。逆にbeforeとafterにページの重要なキーワードを入れたとしても、検索エンジンには認識されません。なのでseo的にはまったく意味ないので注意して下さいね。

②before・afterの使い方

使い方は要素名（h1やpなど）に続けて「:before」「:after」と記述します。テキストを導入したい場合は「content:””;」内に好きな文字を入力。画像を導入したい場合は「content:url();」内に画像のurlを入力します。たったこれだけで指定した要素（h1やpなど）の直前または直後に色々なものが導入できます。

●html
[p]htmlとは[/p]
[p]cssとは[/p]
[p]webとは[/p]

●css
p:after{
content:”・・・・に続く”;
}

●表示
htmlとは・・・・に続く
cssとは・・・・に続く
webとは・・・・に続く

上は例なんですが、こんな感じで要素名（この場合ｐ）に続けて「:after」と記述し、content内に導入したいテキスト（この場合「・・・・に続く」）を記述する事で、指定した部分（この場合ｐ）の直後に表示されるようになります。繰り返しますが、直前に導入したい場合は「:before」、直後に導入したい場合は「:after」と記述して下さいね。あとcontent:””;のように「ダブルクォーテーション」を忘れずに入力しましょう。それと最初にも言いましたが、before、afterに入力したテキストは、ドラッグしても選択されません。つまり通常のテキストのように文字としては認識されません。なので当然、グーグルなどの検索エンジンにも認識されないので、重要なキーワードをここに入れても意味ないです。ですが逆にいえば、文字として認識されないので、関係ない文字をいくら入れてもseoに悪影響を及ぼさないってことです。つまり装飾し放題ってこと。ちなみにbefore・afterの部分はcssで、他の要素（h1やpなど）と同様に装飾することができます。なのでその辺をちょっと説明していきますね。

③before・afterをcssで装飾

●html
[p]htmlとは[/p]
[p]cssとは[/p]
[p]webとは[/p]

●css p:after{
content:”・・・・に続く”;
background:#FF8C00;
color:#fff;
margin-left:10px;
}

④画像を入れる場合

●html
[p]htmlとは[/p]
[p]cssとは[/p]
[p]webとは[/p]

●css
p:before{
content:url(http://www.yuu-diaryblog.com/image/main-kicon.png);
margin-right:10px;
}

画像を表示する場合は「content:url();」のカッコ（）内に表示したい画像のurlを入力します。ここで入力する画像のurlは絶対パス・相対パスのどちらも大丈夫です。ただテキストを導入する時と違ってダブルクォーテーション（”）を付ける必要はないので気を付けて下さいね。あとbefore・afterで導入する画像はサイズを変更することができません。なので、めちゃ面倒ですけどぴったりのサイズの画像を用意して下さいね。ちなみにcssのmarginで右側の余白を開けているのは、単純に位置調整のためです。あ！それと画像以外にもwebフォントを利用したアイコンなども表示できます。例えば今見て頂いている私のブログの右サイドバー「カテゴリ」には、矢印がありますよね。それとかはFont-awesomeというwebフォントを before・afterを利用して表示しています。他にもSNSボタンのマークなんかにも利用しています。

⑤before・afterでできないこと

すごい便利なんでついつい多用しちゃうbefore・afterなんですが、下の二つのことはできません。画像のサイズを変更する事はできない before・afterで表示したテキストや画像にリンク（aタグなど）を貼る事はできない残念ながらこの二つはできません。リンクを貼る事はできないというのは、例えばcontent:”リンク“;というように入力してもリンクが貼られることはないってことです。以上が疑似要素のbeforeとafterについてでしたが、いかがでしたでしょうか？「htmlのソースを見ても文字がないけど、どうやってるの？」なんて所は、大体がbefore・afterと位置を自由に変えられるpositionプロパティを使って表現してたりします。色んなサイトを見てると良くある「こんなの不可能じゃない？？」って部分は、ほとんどがそれらを組み合わせて表現してる事が多いので、ぜひ試してみて下さいね。ホームページやブログを作るのがすごい楽しくなりますよ(^^)/