前端伪类元素::before和::after

定义：

  之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。

当你看别人代码的时候，你会发现::before与:before 

::before与:before

相同点：

1、伪类对象，用来设置对象前的内容

2、::before和:before写法是等效的

不同点：

:befor是Css2的写法，::before是Css3的写法

:before的兼容性要比::before好

建议：

不过在H5开发中使用::before比较好

优缺点

• 优点

  • 减少dom节点数
  • 让css帮助解决部分js问题，让问题变得简单

• 缺点

  • 不利于SEO
  • 无法审查元素，不利于调试

说明：

1、伪类元素要配合content属性一起使用

2、伪类元素是css渲染层加入的，不能通过js来操作

3、伪类对象特效通常