:before 擬似要素および :after 擬似要素は，その名のとおり，要素の内容の前（:before 擬似要素）または後（:after 擬似要素）にテキストなどを挿入するための擬似要素である。これは，ご覧いただいてわかるように，植字擬似要素と同じく，先頭にコロン「:」がついている。

:before
:after

これを用いて，例えば，CLASS 属性に“note”を含むような P 要素について，先頭に“Note. ”という文字列を自動的に挿入させるには，

P.note:before { content: "Note. "; }

のようにすればよい（content プロパティについての詳細は後述する）。

　さて，この :before および :after 擬似要素は，それが結び付けられる要素の子要素として出力される。つまり，X 要素に対して仮想的に次のようにタグ付けされた文書が生成される。

<X>
<X:before>......生成される内容......</X:before>
......要素の内容......
<X:after>......生成される内容......</X:after>
</X>

これからわかるように，自動生成される内容は，（:before または :after 擬似要素の display プロパティが marker でない限り）それと結び付けられた要素の，要素の内容のボックスの内側に生成される（たとえば，上記の例で X 要素に枠が指定されていれば，X:before および X:after で生成される内容は枠の内側になる）。また，CSS のプロパティも，継承可能なものはその要素から継承される。

　ところで，display プロパティの初期値は inline であるので，特に指定しなければ生成される内容は結び付けられた要素の最初または最後のインライン要素の扱いになる。display プロパティを明示して指定することで，生成される内容のボックスの形態を変えることができる。ただし，次のような制限がある。

• 結び付けられる要素がブロックボックスを描く場合，display プロパティに与えられるのは none，inline，block および marker である。それ以外を指定した場合は，block を指定したものとみなされる。
• 結び付けられる要素がインラインボックスを描く場合，display プロパティに与えられるのは none および inline である。それ以外を指定した場合は，inline を指定したものとみなされる。

　ここで，ひとまず，簡単な例をご覧いただこう。

P { line-height: 150%; margin: 0; }
P.note { background-color: #999; font-size: 90%; margin: 0.5em 10%; padding: 0.3em 0.3em 0.3em 2.3em; text-indent: -2em; }
P.note:before { content: "Note. "; color: #009; font-weight: bolder; /* display プロパティは無指定なので inline となる */ }

<P>　メスフラスコは，標線まで液体を入れたとき，フラスコ中の液体の容積が示された容積となる。一方，ホールピペットは，液体を標線まで入れ，流出させたときの量が示された容積になる。</P>
<P CLASS="note">メスフラスコは，重心が高いので，使用しないときは倒しておく。ホールピペットは基本的に口で吸うが，劇物を扱うときは安全ピペッタを用いる。</P>

上のように，セレクタ P.note に合致した要素の先頭に，“Note. ”を生成している。

　:before および :after 擬似要素には，position プロパティ，float プロパティ，箇条書きの項目に関するプロパティ，および，表に関するプロパティは指定できない。

　状況により，インラインボックスを生成したりブロックボックスを生成したりするコンパクト要素およびランイン要素は，:before および :after 擬似要素との関係で複雑なふるまいをする。考えられるのは，次のようなケースである。

ランインまたはコンパクト要素が“display: inline;”である :before 擬似要素をもつとき

生成される内容は要素と同じブロックボックス内に描かれる。コンパクト要素においては，そのボックス生成について生成される内容も加味される（幅，改行の有無）。

ランインまたはコンパクト要素が“display: inline;”である :after 擬似要素をもつとき

前項目と同じ。

ランインまたはコンパクト要素が“display: block;”である :before 擬似要素をもつとき

擬似要素はその要素の上方にブロックボックスとして描かれる。コンパクト要素に対してはボックス生成についてこの内容は加味されない。

ランインまたはコンパクト要素が“display: block;”である :after 擬似要素をもつとき

その要素も，擬似要素もブロックボックスを描く。

ランインまたはコンパクト要素に後続する要素が“display: block;”である :before 擬似要素をもつとき

ランインまたはコンパクトボックスがどう描かれるかは，その :before 擬似要素がどのように描かれるかによる。

ランインまたはコンパクト要素に後続する要素が“display: inline;”である :before 擬似要素をもつとき

ランインまたはコンパクトボックスがどう描かれるかは，その :before 擬似要素が結び付けられた要素の display プロパティによる。

上記のようなルールで，コンパクトおよびランイン要素と生成される内容のボックスのふるまいが決定される。