CSS3 Pre-Reference



::after

要素の直後

試す

コード

p::after { content: "○"; color: blue; }
p::after::after { content: "△"; color: red; }
p::after(2) { content: "×"; color: green; }

サンプル

すべての段落の直後に青文字の○、赤い△、緑の×がこの順で追加されます。

吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。

青文字その後(けむり)したから火がある。ただその日がよかろう度毎まった。

コメントする


対応ブラウザ

Firefox
Chrome/Safari
Opera
InternetExplorer
まだ

パラメータ

レベル 2.0
参考文献 Selectors Level 3#7.4. The ::before and ::after pseudo-elements

解説

要素の直前に任意のコンテンツを追加します。

任意のコンテンツとは、文字、画像、どこかの要素の属性、など。何を追加するかは”content”プロパティで指定します。詳細 は”content”プロパティを参照ください。

仕様書ではちょっと表現が曖昧ですが、この疑似要素で生成された中身は、対象の要素のに属します。

CSS3になって、::afterの入れ子("::after::after"といった記述)、::afterの複数個指定(::after(n)という記述で実現)が可能になりました。

トラックバック

投稿されたコメント