':before'、':after'とコンパクト、ランインボックスの相互作用

':before'、':after'とコンパクトボックス、ランインボックスを併用した場合の適用され方について説明します。ほかの部分の解釈とはかなり異なります。

コンパクトボックスの状態	解釈
インライン型の:before又は:afterを伴う場合	コンパクトボックスの大きさは、疑似要素が占める領域も含めて計算されます。また疑似要素は、コンパクトボックスが含まれているのと同じブロックボックス内に表示されます。
ブロック型の:beforeを伴う場合	疑似要素は、コンパクトボックスの上部にブロックボックスとして描画されます。疑似要素はコンパクトボックスの大きさの計算には影響を与えません。
ブロック型の:afterを伴う場合	コンパクト要素と疑似要素は、両方ともブロックボックスとして描画されます。
後続要素がブロック型の:beforeを伴う場合	コンパクト要素は、:before領域を足した後続要素のマージン部分で、どうすべきかを判断します。
後続要素がインライン型の:beforeを伴う場合	フロートでは無く絶対配置でも無い後続要素を伴う場合、コンパクトボックスは、:before領域を足した後続要素の余り部分で、どうすべきかを判断します。それ以外の場合は、ブロックボックスとして描画されます。

ランインボックスの状態	解釈
インライン型の:before又は:afterを伴う場合	疑似要素は、ランインボックスが含まれているボックスと同じブロックボックス内に表示されます。
ブロック型の:beforeを伴う場合	疑似要素は、ランインボックスの上部にブロックボックスとして描画されます。
ブロック型の:afterを伴う場合	ランイン要素と疑似要素は、両方ともブロックボックスとして描画されます。
後続要素がブロック型の:beforeを伴う場合	ランイン要素は:beforeの前にインラインボックスとして描画されます。
後続要素がインライン型の:beforeを伴う場合	フロートでは無く絶対配置でも無い後続要素を伴う場合、ランインボックスは:beforeの前にインラインボックスとして描画されます。それ以外の場合は、ブロックボックスとして描画されます。

以下は :after疑似要素を伴うランイン要素の例です。更に、後続する p要素は :before疑似要素を伴ったものになっています。
h3 { display: run-in } h3:after { content: ": " } p:before { content: "... " }
このスタイルシートを次のソースに適用すると、
<h3>ケンタウロス</h3> <p>蹄を持っている</p> <p>尻尾を持っている</p>
下のように整形されます。
ケンタウロス: ... 蹄を持っている ... 尻尾を持っている