:after/::afterと:before/::beforeの異同

同じ点

は、いずれも擬似クラスオブジェクトを表すために用いることができ、オブジェクトの前のコンテンツ

を設定するために用いることができる.

:beforeと::beforeの書き方は等価です;after和::after表記は等価

異なる点

:before/:afterはCss 2の書き方、::before/::afterはCss 3の書き方

:before/:afterの互換性は::before/::afterより良いですが、H 5開発では::before/::afterの方が

が推奨されています.
に注意

これらの擬似要素はcontent属性とともに

を使用する.

これらの擬似要素はDOMには表示されないので、jsでは操作できません.CSSレンダーレイヤに

を追加するだけです.

これらの擬似要素の特効は、通常、

をアクティブにするためにhover擬似クラススタイルを使用します.
eg:マウスをspanに移動すると、spanの前に「111111」が挿入されます.

<style>
span{
  background: yellow;
}
span:hover::before{
  content:"111111";
}
style>

<span>222span>