我是如何实用: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不是一般的强大。