CSS伪元素

伪元素可以给某些选择器添加特殊效果，一般用来添加自定义格式

可以与css类配合使用

 

属性

:first-letter 向文本的第一个字母添加特殊样式（块级元素）

:first-line 向文本的首行添加特殊样式 （块级元素）

:before 在元素之前添加内容

:after 在元素之后添加内容

 

【区分】

伪类（:before）和伪元素(::before)

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素

双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

所以，如果网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

 

【提醒】

伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是网页的可用性和可访问性的关键。

另外一件需要记住的是，开发工具，例如火狐，不要用伪元素显示内容。所以，如果使用了，伪元素会造成难以维护和调试缓慢。

 

【块级】

插入的内容在页面的源码里是不可见的。只能在css里可见

同时，插入的元素在默认情况下是内联元素（或者，在html5中，在文本语义的类别里）。因此，为了给插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素

 

【用法】

可以设置content属性值为空，并且仅仅把他当做一个内容很少的盒子

但不能删除content属性

如果你移除了，伪元素将不会起作用

 

【优缺点】

优点

    * 减少dom节点数

    * 让css帮助解决部分js问题，让问题变得简单

缺点

    * 不利于SEO

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