好用的伪元素:before和:after

所有文章是按照以前自己博客发布顺序转移的，本文成文较早，在行文的时候有些错误，伪类≠伪元素两者还是有差异的，当时发现这个错误的时候我只是修改了题目，文章内容没有修改。姑且这么看吧。

提到伪类估计大家第一个在脑海中想起来的就是:hover,我们经常<a>上设置。能实现比较炫鼠标交互的效果。其实:hover也能作用于其他元素，例如在<div>上设置就能让鼠标在经过时候发生改变。可以试下一下。

div{
    width: 50px;
    height: 50px;
    background-color: blue;
}
div:hover{
    background-color: red;
}

divhover.jpg

这个不是今天说的重点，今天要说的是伪类:before和:after，关于这俩哥们刚开始的时候我还真是小瞧了他们，后来我还是逐渐重视它们起来。废话不说国际惯例先来介绍浏览器的支持情况。

beforeafterhistory.jpg

所有的浏览器都支持，下面来说下它们的作用。:before和:after会在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

div:before {
    content: "这里是添加的开头#####";
    color: red;
}
 
div:after {
    content: "$$$$$$这里是添加的结尾";
    color: red;
}

:before和:after的效果

这样就在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>

beforeafter-content-example.jpg

很神奇是吧，发挥想象力吧！了解了: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;
}

CSS实现八卦效果

戳这里可以看八卦的代码