CSS3 Pre-Reference



::before

要素の直前

試す

コード

p::before { content: "○"; color: blue; }
p::before::before { content: "△"; color: red; }
p::before(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になって、::beforeの入れ子("::before::before"といった記述)、::beforeの複数個指定(::before(n)という記述で実現)が可能になりました。

トラックバック

投稿されたコメント

CSS勉強中 返信

サンプルの説明にある、「黄色い×」は「緑の×」ですね。

ばあどからCSS勉強中への返信 返信

ご指摘ありがとうございます。
確かにその通りですねぇ。。
::afterのほうも間違ってたので、直しました。