CSS ::セレクターの前
例
各<p>要素のコンテンツの前にテキストを挿入します。
p::before
{
content: "Read this: ";
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
セレクターは、::before
選択した各要素のコンテンツの前に何かを挿入します。
contentプロパティを使用して、挿入するコンテンツを指定します。
:: afterセレクターを使用して、コンテンツの後に何かを挿入します。
バージョン: | CSS2 |
---|
ブラウザのサポート
表の数字は、セレクターを完全にサポートする最初のブラウザーのバージョンを示しています。
Selector | |||||
---|---|---|---|---|---|
::before | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
CSS構文
::before {
css declarations;
}
その他の例
例
すべての<p>要素のコンテンツの前にコンテンツを挿入し、挿入されたコンテンツのスタイルを設定します。
p::before
{
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
関連ページ
CSSチュートリアル:CSS疑似要素
CSSセレクターリファレンス:CSS ::セレクターの後