CSS ::before 仮要素

定義と使用方法

CSS ::before 仮要素は、指定された要素の内容の前に内容を挿入するために使用されます。

使用 content 属性値は、挿入する内容を指定します。contentの値は次のとおりです：

• 文字列：content: "Hello world!";
• 画像：content: url(myimage.jpg);
• 無内容：content: none;
• カウンタ：content: counter(li);
• 引用符：content: open-quote;
• 属性値：content: " (" attr(href) ")";

ヒント：注意：挿入された内容は指定された要素の内部にまだあります。挿入された内容は、要素内の他の内容の前に追加されます。

使用 ::after 特定の要素の内容の後に内容を挿入します。

例

例1

各<p>要素の内容の前に文字列を挿入します：

p::before {
  content: "Read this: ";
}

自分で試してみる

例2

各<p>要素の内容の前に文字列を挿入し、挿入内容のスタイルを設定します：

p::before {
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

自分で試してみる

CSS文法

::before {
  css宣言;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、その仮要素を完全にサポートする最初のブラウザバージョンを指定しています。

関連ページ

チュートリアル：CSS 仮要素

参照：CSS ::after 仮要素