CSS ::after 仮要素

定義と用法

CSS ::after 仮要素は、指定された要素の内容の後ろにいくつかの内容を挿入するために使用されます。

使用 content 属性指定する内容

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

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

使用 ::before 特定の要素の内容の前にいくつかの内容を挿入します。

インスタンス

例1

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

p::after {
  content: " - これを覚えなさい";
}

自分で試してみる

例2

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

p::after {
  content: " - これを覚えなさい";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

自分で試してみる

CSS文法

::after {
  css宣言;
}

技術的詳細

ブラウザのサポート

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

関連ページ

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

参照：CSS ::before 仮要素