首页 > 代码库 > 自从用了:before :after 腰不酸了，腿不疼了
自从用了:before :after 腰不酸了，腿不疼了
最近一直做移动端，没和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不是一般的强大。
自从用了:before :after 腰不酸了，腿不疼了