前回の補足っぽい？Before疑似要素・After疑似要素ってなんぞ。

はい、おはこんばんちはー。web制作にかかわっている人でーす。
え？はい、挨拶が古いですね。わざとです。

しかしまぁきちんと挨拶しておきましょうか。
改めまして、おはようございます。もしくは、こんにちは。もしくは、こんばんは。
Penseurにてweb制作にかかわっている人です。

2回目の記事ですね。

えー、実は今回1回目に書かせていただきました記事「CSSでちょっとした図形を描いてみるーわーい」の補足説明です。1回目の記事の中でcssを記載していましたが、ちょっと注目。



っちゅーことでちょっと「before疑似要素」、「after疑似要素」について話そうかと…とかいいつつ既にいろいろな方がわかりやすく説明している気がしなくもない。まぁいいや。

まず「疑似要素」っちゅーものが一体何なのかですが、平たく言うとpタグとかspanタグとかdivタグとかのボックスの中に発生させるコード上は存在しない要素……言葉で言ってもわかりにくいと思いますので（てか私はなかなか理解でけんかった）


と、まぁこんな感じで図にしてみました。（……わかる…かな（わかりにくいかな…うーん））
この図の時のcssコードはざっくり言ってハイどん！

p:before{
  content: "before疑似要素";
}
p:after{
  content: "after疑似要素";
}

と、こーなるんですが(実はこのコードだと”before疑似要素”、“after疑似要素”は改行されないので半分嘘コードなんですが…まーこんな感じと理解していただければればれば)、pタグの後ろについてる「:before」「:after」とcontent:"～～";この三つが肝なんです。はい。

:beforeというのが、要素（例の場合pタグ）のコンテンツの前方に要素を発生させて、
:afterというのが、要素（例の場合pタグ）のコンテンツの後方に要素を発生させます。
まぁbefore、afterそのまんまなんですがね。

補足の補足ー。
実はこの記載の仕方はcss3の標準じゃないのですが（css3では::before、::afterとするのが正しい）
Internet Explorer8がこの書き方に対応していないので、このバージョンを視野に入れるならまだ使えない……という状態ですはい

で、ここで注意しないといけないのが、「content」の指定忘れ。
こうbackgroundやらcolorやらwidthやらheightやらdisplayやらいろいろ設定しても「content」を忘れるとなーんも表示されません。（実はよくやらかします。）
前回の記事ではいちいち同じ指定を何度も書きたくなかったのでまとめて指定していたわけですね。

この「content」実は結構すごいやつなのですがこれを話すとまた長くなってしまいますので、今回は話しません。ごめんなさいね。

「content」以外に注意しないといけない点としては、この便利なbefore after疑似要素Internet Explorer（通称IE）のバージョン7以下では表示されないんです。しょぼーん(´・ω・｀)

しかーし！それ以上の場合は何も気にしなくてOK！やったね！
アイコン作るもよし！、ちょっとした装飾をしてみるもよし！連番を文字の頭に表示させてみるもよし！！
「疑似要素」とはいえ、displayを指定する事ができるのでブロック要素にしてみたりなんて事も出来るんですね！

具体的に言うとこのアイコン何べんも出てくるからcssでもう背景画像にしたいんだけど背景画像は既に設定しちゃってるんだよなぁとかいう時に便利です（背景画像が複数設定できる事もあるんですけどね…どうしてもできないブラウザもあるのでね、そこにも対応したい時っていうのはあるのでね。ははは）

正直な話、使ってみないと覚えられないとは思いますので、ぜひぜひ使ってみてくださいな―（とうの昔につことるわー！そーですかー！）

最後に、疑似要素について面白詳しく書かれている記事等ご紹介いたしましょう！

3streamer blog「CSSの疑似要素と疑似クラスをもう一度最初から」
LIGブログ「まだまだある！疑似要素と疑似クラスでできること」