所有文章是按照以前自己博客发布顺序转移的，本文成文较早，在行文的时候有些错误，伪类≠伪元素两者还是有差异的，当时发现这个错误的时候我只是修改了题目，文章内容没有修改。姑且这么看吧。
提到伪类估计大家第一个在脑海中想起来的就是:hover,我们经常<a>上设置。能实现比较炫鼠标交互的效果。其实:hover也能作用于其他元素，例如在<div>上设置就能让鼠标在经过时候发生改变。可以试下一下。
div{
width: 50px;
height: 50px;
background-color: blue;
}
div:hover{
background-color: red;
}
这个不是今天说的重点，今天要说的是伪类:before和:after，关于这俩哥们刚开始的时候我还真是小瞧了他们，后来我还是逐渐重视它们起来。废话不说国际惯例先来介绍浏览器的支持情况。
所有的浏览器都支持，下面来说下它们的作用。:before和:after会在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：
div:before {
content: "这里是添加的开头#####";
color: red;
}
div:after {
content: "$$$$$$这里是添加的结尾";
color: red;
}
这样就在div前面和后面添加了我们在content里面设置的东西。需要注意的是content可以为空，即content:"";但是不能不设置，否则伪类无效。由于插入的内容默认是一个行内元素，并且在HTML源代码中无法看到（这就是为什么称之为伪类的原因），所以也就无法通过DOM对其进行操作。并且伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体、颜色等。我们的content里面不只能插入文本，还可以指定其他内容，例如图片等。
p:before,p:after{
content: url("1.jpg");
}
a:after {
content: attr(href);
}
<p>我是P标签，由于:before和:after我前后都会有图片</p>
<a href="https://www.lidongtech.com/" >我是A标签因为:after我的后面会跟上我的链接地址</a>
很神奇是吧，发挥想象力吧！了解了:before和:after是不是有点要做什么的冲动？它们能应用的地方有很多。例如比较难搞的浮动float,我们都知道如果在一个元素内部的子元素设置了浮动，为了让子元素能将父元素给“撑”起来，那么必须在父元素的结束标签前面需要设置清除浮动clear:both，老办法就是新建一个div然后引用浮动的类。这样会多一个毫无意义标签不说，在javascript操作子元素的时候还会出现莫名的BUG。
//伪类清楚浮动
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 */
.clearfix {
zoom:1;
}
在设置浮动的父元素的上引用.clearfix就能实现清楚浮动，很方便是吧。为什么里面会有display:table;？因为这样设置的:before和:after会作为块级表格来显示（类似），表格前后带有换行符。这样就能确保万无一失了。另外zoom:1;会在IE6/7浏览器下形成BFC区域以此来实现清除浮动。开下脑洞吧:before和:after还能实现更神器的效果。比较经典的例子就是用伪类实现八卦图了，下面放出代码：
#Gossip {
width: 96px;
height: 48px;
background: snow;
border-color: #444;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#Gossip:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: snow;
border: 18px solid #444;
border-radius: 100%;
width: 12px;
height: 12px;
}
#Gossip:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #444;
border: 18px solid snow;
border-radius:100%;
width: 12px;
height: 12px;
}
