我是如何实用:before :after

本文地址http://www.cnblogs.com/Bond/p/3972854.html 

最近一直做移动端，没和IE6打交道了，瞬间感觉世界变美好了。移动端虽然还是各种坑，但是比起修复IE6那还是轻松多了，移动端很多效果可以用CSS3来做，感觉一切都和谐的。

:before :after 也许大家认识它是从清楚浮动开始的。它在我眼里就是两个标签，而且非常实用好用，常用它你会发现，你可以省去很多冗余的标签。也许以前你用的是三个标签，而现在你只需要一个标签就能搞定。

总结下最近是如何实用它两的。

关闭按钮，这个只需一个标签，完全用css3实现，×用：before 和:after

.close{position: absolute;width: 30px;height: 30px;background-color: rgba(0, 0, 0, .5);border-radius: 50%;right: -10px;top: -15px;
}
.closee:after, .close:before {content: "";background-color: #FFFFFF;height: 2px;width: 22px;border-radius: 2px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;transform: rotate(45deg);-webkit-transform: rotate(45deg);
}
.close:before {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);
}

 

这种和上面的类似，直接一个标签，里面用:before和after来搞定

 

这种可以用:before和:after来做，不过相对就麻烦，但是用:before和:after可以控制两条线之间的角度。 如果想简单，假设两条线之间的角度是90，那么可以直接用border加旋转，或者是用阴影加上旋转就可以搞定。

/*→箭头 》》》》》》 用border来做，用阴影方法类似*/.r:after {position: absolute;right: -10px;top: 0;bottom: 0;margin: auto 0;content: "";display: block;height: 6px;width: 6px;border-top: 2px solid #c6c6c6;border-right: 2px solid #c6c6c6;transform: rotate(45deg);}

 

像这种文字前后都有图片，那个图片看似可以用css3来写，不过貌似不规则，没办法只能切图片。 文字前后均有这个直接用:before和:after 是多么美好

/* 背景斜线 */
p:before,p:after{position: absolute;content: "";width: 23px;height: 1em;background: url('XXXXX.png') left bottom no-repeat;background-size: 17px 10px;
}
p:before {left: 0;top: 13px;
}

 

微博上的箭头，那个小三角。可以用：before来做。不过新浪微博肯定不是那样做的，在pc端要考虑兼容性问题，他是直接放在一个span标签中的，可是我们在移动端那就不用怕，直接用：before吧.这样可以少一个span标签。 关于三角的实现方法也多。纯css可以，里面内容用◆，color设置为相应的颜色即可。

 

 

这种文字居中，居中之后后面还有一个图片。后面的图片直接用：after 可以减少一个标签

 

这种和上面类似，文字如果在h1标签中，那么那个箭头直接用：afterjiu 就搞定了

 

<p class="XX">关注XXX，我们将引导你 <br>获得XXXXXXXXX</p>

.text {position: relative;color: #333333;font-size: 16px;text-align: center;line-height: 26px;font-weight: bold;margin: 32px 0 28px;
}.text :after {content: "";position: absolute;width: 52px;height: 52px;right: -2px;top: 6px;background: url('Xxxx.png') no-repeat;background-size: 32px auto;
}

 

说了：before 和：after用起来多么爽，我不得不说下box-shadow,

之前的》》》》》 可以用box-shadow来做

这个效果一个标签搞定，外面圆一个，里面长方形用：before 三个点用：after 加上box-shadow

三个点这样做

p{width: 100px;height: 100px;border-radius:50%;background:#666666;box-shadow:105px 0 #666666,210px 0  rgba(200,200,200,.4);
}

下面这个加载动画，N个小圆点，其实就是一个点加上N个box-shadow。每个box-shadow位置不同，透明度不同而已，只需一个标签即可搞定。

css3是多么的强大，自己平时也没系统地学习css3， 买了本《css3图解》，以后慢慢研究。

看两个碉堡的css3

http://css-tricks.com/examples/ShapesOfCSS/

http://www.cnblogs.com/lhb25/p/create-simpsons-characters-pure-css.html

腾讯的企鹅  美团的小娃娃 他们都用纯css来画过，有兴趣可以去研究下，css3不是一般的强大。