关于伪类元素:before和:after
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：
#example:before {
content: "#";
color: red;
}
#example:after {
content: "$";
color: red;
}这段代码会在#example元素内容之前插入一个'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下:
#Here is the example content$
需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。
需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。
#example:before {
content: "";
display: block;
width: 100px;
height: 100px;
}伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。
除了插入文字内容，还可以指定其他内容：
p:before {
content: url('img.jpg');
}
a:after {
content: attr(href);
}attr()函数会返回指定元素对应属性的值
:before和:after的一些惊人用法
>. clearfix hack
如果父元素容器里面的子元素是浮动元素的话，我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起，但是这种方法引入了多余的无意义标签，并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS，所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没，只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现：(via Nicolas Gallagher)
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}>. CSS实现的八卦图案
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}腾讯云开发者
