::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">コンテンツ1</span>
<span class="ex">コンテンツ2</span>
<span class="ex">コンテンツ3</span>
コンテンツ1 コンテンツ2 コンテンツ3

関連