:after/::after和:before/::before的异同

相同点

• 都可以用来表示伪类对象，用来设置对象前的内容
• :before和::before写法是等效的; :after和::after写法是等效的

不同点

• :before/:after是Css2的写法，::before/::after是Css3的写法
• :before/:after 的兼容性要比::before/::after好 ，
  不过在H5开发中建议使用::before/::after比较好

注意

• 这些伪元素 要配合content属性一起使用
• 这些伪元素 不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
• 这些伪元素 的特效通常要使用:hover伪类样式来激活

eg:当鼠标移在span上时，span前插入”111111”

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

<span>222</span>