::after CSS擬似要素

CSSの「::after」疑似要素を使うと、指定した要素の後にテキストや画像を挿入することができます。この記事では、疑似要素の使い方をサンプルを交えてご紹介します。

書式

指定した要素タイプの仮想的な最後の子要素

element::after {
  /* properties */
}

指定した要素タイプのうち、指定したクラスを持つ要素の仮想的な最後の子要素

element.class::after {
  /* properties */
}

指定したクラスを持つ要素の仮想的な最後の子要素

.class::after {
  /* properties */
}

指定したIDの要素の仮想的な最後の子要素

#id::after {
  /* properties */
}

::after擬似要素を用いて、blockquote要素の後に「』」という文字列を挿入する例を示す。

blockquote::after {
  content: "』";
}
<blockquote>
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
</blockquote>
吾輩は猫である。 名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

CSS疑似要素