【:after擬似要素】要素の直後に内容を追加する

:after擬似要素は、contentプロパティと共に使用し、その要素の直後に生成追加される内容に対してスタイルを適用することができます。

※内容(テキスト、画像、引用符、カウンタなど)の追加はcontentプロパティで指定します。

また:after擬似要素は、:first-letter:first-lineと併せて使用すると、内容の内容の最初の文字や最初の1行目のみにスタイルを適用することができます。

なおCSS2では:beforeのようにコロン(:)を1つのみ記述しますが、CSS3では::beforeのようにコロン(:)を2つ記述することができます。 この記述方法は疑似クラスと疑似要素をはっきりと見分けるためにCSS3で導入された記法となります。 ですが多くのブラウザでは:beforeと記述することが可能です。

ちなみに:before疑似クラスとの違いは、要素の直前(:before)なのか、直後(:after)なのかとなります。

書式

  • 要素名:after {プロパティ名:値;} ……… 要素の直後に内容を追加する

使用した時の例

.sample1:after {
  content: "「注目!!」";
  color: red;
}
.sample2:after {
  content:"";
  display:block;
  height:10px;
  background: blue;
}
<p>サンプルテキスト</p>
<p class="sample1">サンプルテキスト</p>
<p class="sample2">このテキストの下(display:blockにしたので下)に
.sample2:beforeの内容が追加</p>

ブラウザ上の表示例

サンプルテキスト

サンプルテキスト

このテキストの下(display:blockにしたので下)に .sample2:beforeの内容が追加

対応ブラウザなどのデータ

適用対象 要素の直後に生成追加される内容
対応ブラウザ Internet Explorer8~ , Google Chrome~ , Firefox1~ , Opera4~ , Safari4~

関連情報