::afterとは、選択した要素の後に文字列や画像を挿入するために使うCSS擬似要素である。

書式

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

element::after { properties }

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

element.class::after { properties }

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

.class::after { properties }

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

#id::after { properties }

::after擬似要素を用いて、blockquote要素の後に「≪ 吾輩は猫である」という文字列を挿入する例を示す。

CSS:

blockquote::after {
  content: "≪ 吾輩は猫である"
}

HTML:

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

表示:

吾輩は猫である。 名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
このエントリーをはてなブックマークに追加
スポンサーリンク