::before【コンテンツ直前】擬似要素
::after【コンテンツ直後】擬似要素

メモ 外部リンク 構文 例

メモ

  • コンテンツ直前・コンテンツ直後に適用する擬似要素
  • content【コンテンツ】指定で文字列・引用符等を挿入
  • 要素については、HTML5 リファレンス メモ 参照

構文

構文説明
E::before  { スタイル定義 }
E:before   { スタイル定義 } 		E要素のコンテンツの直前に適用
E::after  { スタイル定義 }
E:after   { スタイル定義 } 		E要素のコンテンツの直後に適用

例

<style>
.ex::before { content: "(直前)"; color: blue; }
.ex::after  { content: "(直後)"; color: red; }
</style>

<span class="ex">コンテンツ１</span>
<span class="ex">コンテンツ２</span>
<span class="ex">コンテンツ３</span>

コンテンツ１ コンテンツ２ コンテンツ３