：beforeおよび
：after擬似要素を使用すると、適用された要素の前後にコンテンツ（スタイル）を追加できます。
合計でいくつかのタイプの疑似要素があります::
first-line 、：
first-letter 、
:: selection 、：
beforeおよび
：after 。 この記事では、最後の2つを最も役立つものとして詳しく説明します。
ブラウザの構文とサポート
疑似要素はCSS1に登場しましたが、CSS2.1でのみリリースされました。 冒頭で、シンタックスでは単一のコロンが使用されましたが、CSS3では二重コロンを使用して擬似クラスと区別しています。
しかし、いずれにしても、最新のブラウザーは、コロンを1つしか受け入れないInternet Explorer 8を除き、両方のタイプの疑似要素構文を理解できます。 したがって、使用する方が安全です。
擬似要素の使用例
<p> <span>:before</span> . <span>:after</span> </p>
：beforeおよび
：after要素は生成されません。 はページコードに表示されないため、擬似要素と呼ばれます。
使用する
擬似要素の使用は非常に簡単です。
：目的の要素の前に
beforeを追加し、
その後にafterを追加します。
疑似要素内にコンテンツを追加するには、
CSS-property contentを使用できます。
簡単な例：引用に引用符を追加する必要があります：
blockquote:before { content: open-quote; } blockquote:after { content: close-quote; }
擬似要素のスタイル設定
「実際の」スタイルと同じスタイルを擬似要素に適用できます。色の変更、背景の追加、フォントサイズの調整、テキストの配置など。
blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; } blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: rightright; position: relative; bottombottom: 40px; }
作成された要素はデフォルトでは
インライン要素であるため、高さまたは幅を指定する場合は、
display：blockを設定する必要があり
ます 。
blockquote:before { content: open-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: left; position: relative; top: 30px; border-radius: 25px; display: block; height: 25px; width: 25px; } blockquote:after { content: close-quote; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; background: #ddd; float: rightright; position: relative; bottombottom: 40px; border-radius: 25px; display: block; height: 25px; width: 25px; }
また、擬似要素内では、プレーンテキストの代わりに画像を使用したり、背景画像を追加することもできます。
blockquote:before { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: left; position: relative; top: 30px; border-radius: 25px; background: url(images/quotationmark.png) -3px -3px #ddd; display: block; height: 25px; width: 25px; } blockquote:after { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: rightright; position: relative; bottombottom: 40px; border-radius: 25px; background: url(images/quotationmark.png) -1px -32px #ddd; display: block; height: 25px; width: 25px; }
この例では、contentプロパティに空の文字列が含まれています。これは必要です。そうでない場合、擬似要素は正しく表示されません。
擬似クラスで使用
擬似要素は擬似クラスと一緒に使用できます。この例では、引用符にホバー効果を追加するのに役立ちます。
blockquote:hover:after, blockquote:hover:before { background-color: #555; }
トランジション効果を追加する
transitionプロパティを使用して、引用符の色をスムーズに変更することもできます。
transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms;
残念ながら、これは最近のバージョンのFirefoxでのみ正常に機能します。
この記事
の例のデモをご覧ください。
少しのインスピレーション
擬似要素を使用する3つの例：beforeおよび：afte：
