css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。
css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，本文就详述一下:before和:after元素的使用
一、伪元素:before和:after用法
这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）。可以用以下例子来说明：
<p>wonyun!</p> <style> p:before{content: "hello "} p:after{content: "you are handsome!"} </style>上面例子从技术角度看，等价于下面的html结构：
<p>
<span>hello </span> wonyun! <span> you are handsome!</span> </p>由此可知：伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。那么问题来了，content属性的值可以有哪些内容呢，具体有以下几种情况：
-
字符串，字符串作为伪元素的内容添加到主元素中 -
attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。
-
url()/uri(), 引用外部资源，例如图片； -
counter(), 调用计数器，可以不使用列表元素实现序号问题。
二、:before和:after特点
上面说了，伪元素是通过样式来达到元素效果的，也就是说伪元素不占用dom元素节点，引用里面总结的，:before和:after伪元素的主要特点如下：
-
伪元素不属于文档，所以js无法操作它
-
伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件
-
原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。
基于伪元素的特点可以知道其优缺点，也引用别人文章的话：
* 优点
* 减少dom节点数
* 让css帮助解决部分js问题，让问题变得简单
*缺点
* 不利于SEO
* 无法审查元素，不利于调试