前後の疑似要素を理解する
カスケーディングスタイルシート（CSS）は、主にHTMLマークアップへのスタイルの適用を目的としていますが、ドキュメントに追加のマークアップを追加することが冗長または不可能な場合、実際にはCSSに追加のマークアップを追加する機能があります。実際の文書、すなわち 疑似要素.
あなたが私たちのチュートリアルのいくつかに従ってきたときは特に、あなたはこの用語を聞いたことがあります.
に分類されるいくつかのCSSファミリーメンバーが実際にあります 疑似要素 のような ：一行目, ：最初の一文字, ：：選択, ：前 そして ：後. しかし、この記事では、私達は私達の報道を ：前 そして ：後, “疑似要素” ここでは特に両方を参照します。私達は基礎からこの特定の主題を調べます.
構文とブラウザのサポート
の 疑似要素 それ以来、実際に出回っています CSS1, しかし ：前 そして ：後 ここで議論しているのは CSS2.1. 初めに、 疑似要素 シンタックスにはシングルコロンを使用し、その後Webが進化するにつれて、CSS 3では 疑似要素 ダブルコロンを使うように修正されました ：：前 ＆ ::後 - と区別するために 疑似クラス （つまり. ホバー, ：アクティブ, 等々）.
ただし、シングルコロンまたはダブルコロンのどちらの形式を使用しても、ブラウザはどちらかを認識します。また、Internet Explorer 8はシングルコロンフォーマットしかサポートしていないため、より広いブラウザ互換性が必要な場合はシングルコロンを使用する方が安全です。.
それは何をするためのものか?
要するに、 疑似要素 余分な要素を挿入します 前 または 後に コンテンツの要素なので、両方を追加すると、技術的に同等になり、次のようにマークアップされます。.
：前 これが主な内容. ：後
しかし、それらの要素は実際には文書上には生成されません。それらはまだ表面上に表示されていますが、あなたはそれらをドキュメントソース上で見つけることはできません。 偽 要素.
擬似要素を使う
を使う 疑似要素 比較的簡単です。次の構文 セレクタ：前 要素を追加します 前 この構文中のコンテンツのセレクタ セレクタ：後 その後に追加し、その中にコンテンツを追加するには、 コンテンツ 財産.
たとえば、以下のスニペットは引用符の前後に引用符を追加します。 ブロッククォート.
blockquote：before content：open-quote; blockquote：after content：close-quote;
擬似要素のスタイリング
偽の要素であるにもかかわらず、 疑似要素 実際には “リアル” 素子;色の変更、背景の追加、フォントサイズの調整、内部のテキストの位置合わせなど、スタイル宣言を追加することができます。.
blockquote：before content：open-quote;フォントサイズ：24pt。 text-align：center。行の高さ：42ピクセル。色：#fff;背景：#ddd;フロート：左。位置：相対;トップ：30px。 blockquote：after content：close-quote;フォントサイズ：24pt。 text-align：center。行の高さ：42ピクセル。色：#fff;背景：#ddd;フロート：右。位置：相対;下：40px。
寸法を指定する
生成された要素はデフォルトではインラインレベルの要素なので、高さと幅を指定しようとしているときは、まずそれを使ってブロック要素として定義する必要があります。 表示ブロック 宣言.
blockquote：before content：open-quote;フォントサイズ：24pt。 text-align：center。行の高さ：42ピクセル。色：#fff;背景：#ddd;フロート：左。位置：相対;トップ：30px。ボーダー半径：25ピクセル。 / **ブロック要素として定義する** / display：block;高さ：25ピクセル。幅：25ピクセル。 blockquote：after content：close-quote;フォントサイズ：24pt。 text-align：center。行の高さ：42ピクセル。色：#fff;背景：#ddd;フロート：右。位置：相対;下：40px。ボーダー半径：25ピクセル。 / **ブロック要素として定義する** / display：block;高さ：25ピクセル。幅：25ピクセル。
背景画像を添付
プレーンテキストだけでなく、コンテンツを画像に置き換えることもできます。が コンテンツ プロパティは url（） 画像を挿入する文字列ですが、ほとんどの場合、 バックグラウンド 添付画像をより細かく制御するためのプロパティ.
blockquote：content： ""の前フォントサイズ：24pt。 text-align：center。行の高さ：42ピクセル。色：#fff;フロート：左。位置：相対;トップ：30px。ボーダー半径：25ピクセル。背景：url（images / quotationmark.png）-3px -3px #ddd;表示ブロック;高さ：25ピクセル。幅：25ピクセル。 blockquote：content： ""の後フォントサイズ：24pt。 text-align：center。行の高さ：42ピクセル。色：#fff;フロート：右。位置：相対;下：40px。ボーダー半径：25ピクセル。背景：url（images / quotationmark.png）-1px-32px #ddd;表示ブロック;高さ：25ピクセル。幅：25ピクセル。
しかし、上のスニペットからわかるように、私たちはまだ宣言しています。 コンテンツ プロパティと今回は空の文字列です。の コンテンツ 財産は 要件 そして常に適用されるべきです。そうでなければ 疑似要素 動作しないでしょう 何でも.
疑似クラスと組み合わせる
彼らは別の種類ですが 擬似, 我々は使用することができます 疑似クラス に加えて 疑似要素 たとえば、1つのCSSルールにまとめます。 引用符の背景 の上にマウスを置くと、少し暗くなります。 ブロッククォート.
blockquote：ホバー：後、blockquote：ホバー：前背景色：＃555;
トランジション効果を追加する
そして私達は適用することができます 遷移 グレースフルカラートランジション効果を作成するためにそれらにプロパティ.
遷移：すべて350ms。トランジション：すべて350ms。 -moz遷移：すべて350ms。 -webkit-transition：すべて350ミリ秒。
残念ながら、移行効果はFirefoxの最新バージョンでしか機能しないようです。うまくいけば、より多くのブラウザがtransitionプロパティを適用できるように追いつくでしょう 疑似要素 将来は.
- デモ
- ソースをダウンロード
より多くのインスピレーション
あなたを刺激するために、私たちはあなたのWebデザインのためのアイデアをあなたに与えることができる3つのクールな例を選びました.
魅力的な影
このチュートリアルでは、Paul Underwoodが、よりリアルで魅力的なシャドウ効果を作成する方法を説明しました。 ：前 そして ：後 疑似要素. 両方とも絶対に配置されていて、一番後ろに配置されています。 負 Zインデックス 値.
積み上げ画像効果
を使う 疑似要素 マークアップに1つの画像だけを使用して、面倒なスタック画像効果を作成することもできます。の 疑似要素 ネガを使用して実際の画像の後ろに積み重ねられた画像の錯覚を作成するために使用されます Zインデックス.
結論
PSeudo-elements 単純です “クール” そして最終的には使える、基本的には 2つのボーナス要素 実際のHTML構造をまったく妨げずに追加したすべての要素について、次に想像できるほぼすべてのものにそれらを変換します。.
実際にはいくつかの改善があります 疑似要素 それは現在取り組んでいます。 入れ子の擬似要素 div :: before :: before content： "; そして 複数の疑似要素 div :: before（3）content： "; これは明らかに将来のWebデザインの実践においてもっと多くの可能性を開くでしょう。現在のブラウザに実装されていますが、しばらくの間辛抱強く待ってみましょう.
