■content プロパティーについて■
content プロパティーは、要素の前後に、:before または :after という擬似要素を使って
テキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの
文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。
覚えておいて欲しいのが、この content プロパティーを使って表示したテキストは選択したり、
コピー＆ペーストができません。文章として扱いたい場合は、CSSを使わず、ちゃんとHTML内に
記述しましょう。
▲:before と ::before 違い▲
CSSのサンプル等で :before や :after と書かれたものと、::before、::after と書かれたものの二種類を見かけたことがあるかもしれません。
これはCSSのバージョンの違いによって書き方が違います。CSS2まではコロンひとつで記述していましたが、CSS3になってコロンが二つになりました。
現状コロン二つの使い方で問題ないと思いますが、IE8以下の古いブラウザーには対応していないので、もし対応する必要があるならこれまで通り
コロン一つにしておきましょう。
それでは content プロパティーを使った例をいくつか紹介します！デモの「HTML」「CSS」タブをクリックすると、それぞれのコードが表示されます！
▲before・afterでできないこと▲
①画像のサイズを変更する事はできない
②before・afterで表示したテキストや画像にリンク（aタグなど）を貼る事はできない
残念ながらこの二つはできません。
リンクを貼る事はできないというのは、
例えばcontent:”<a href=””>リンク</a>”;というように入力しても
リンクが貼られることはないってことです。
以上が疑似要素のbeforeとafterについてでしたが、
いかがでしたでしょうか？
「htmlのソースを見ても文字がないけど、どうやってるの？」
なんて所は、大体がbefore・afterと
位置を自由に変えられるpositionプロパティを使って表現してたりします。