利用伪元素仿苹果手机官网导航
伪类和伪元素
伪元素在css3的写法是::after，都是以双冒号开头，而css2的写法则是这样:after，并且需要把伪元素（pseudo element）和伪类（pseudo classes）区分开来，他们拥有伪类的写法，但是却不是伪类，目前已知的伪元素就只有5个，分别是before,after,first-line,first-letter,selection，更多详情请点击这里→pseudo elements一般情况下我们见得最多得就是伪类，比如我们一开始写css重置样式的时候最最最常用到的是链接重置：
a:hover,
a:link,
a:visited,
a:active {
text-decoration:none;
}
这个就是典型的伪类，关于更多伪类知识，不妨点击右侧→Pseudo-classes。
伪元素用途
伪元素的用法目前最多的应该是 清除浮动、图标制作这些，但是不管是当做什么用途，其真正意义应该是为css生成内容助力，一般这些用到伪元素的地方都会用到content内容生成属性，所以暂且就这么认为吧，虽然:selection选择伪元素不常跟，但是对于after,before这种常用伪元素就经常跟content属性在一起了。
对于伪元素的研究，各位可以前往鑫哥的博客，他对伪元素的研究更加的细致和透彻→张鑫旭对伪元素研究，看完了这些文章估计你会对这类元素颇有一番醐醍灌顶的赶脚哈。
最终demo→仿苹果导航按钮
其实就是利用伪元素before,after来构造一个图形，因为没有利用任何的图片都是基于css代码来写，因此当点击按钮之后的代码需要借助 transform 变形属性。
当前按钮的效果
点击之后的效果
最终效果如下：
css
.btn{ display:inline-block;width:100px;height:100px;text-align:center; opacity:initial}
.cur,.hover{
position:relative;
display:inline-block;
vertical-align:top;
height:4px;
width:35px;
top:48px;
}
.cur:before,.cur:after,.hover:before,.hover:after{
position:absolute;
content:"";
background-color:#fff;
height:100%;
width:100%;
}
.cur:before{
transform:translateY(-200%); /*当前按钮，Y轴向上移动-200%，因为span的高度为4px，因此span整体向上移动4px*/
-webkit-transform:translateY(-200%);
}
.cur:after{
transform:translateY(200%); /*同理，span整体向下移动4px*/
-webkit-transform:translateY(200%);
}
.hover{ background-color:transparent;}
.hover:before{
transform:translateY(0) rotate(45deg); /*点击之后，Y轴恢复到原点坐标，然后顺时针旋转45°角*/
-webkit-transform:translateY(0) rotate(45deg);
}
.hover:after{
transform:translateY(0) rotate(-45deg); /*点击之后，Y轴恢复到原点坐标，然后逆时针旋转-45°角*/
-webkit-transform:translateY(0) rotate(-45deg);
}
html+JS
html <div class="top">
<a href="javascript:void(0)" class="btn"><span class="cur"></span></a>
</div>
JQ <script type="text/javascript">
$(".btn").click(function(){
$("span").toggleClass("hover");
});
</script>
表格布局
你也许肯定猜想不到这货还可以来构造一个伪造的表格，这真心不是盖的，不信自个前往美团手机网，如图：
这个三列的表格就是用:after+:before伪元素来伪造出来的，伪元素这个称号给得真心没有白给。具体的样式，各位自个去研究哈，大同小异，记得不要忘记content
后话
当然伪元素的应用还不止这些小应用，估计还应该更有大有作为的，重复发挥我们的想象力，也许哪天构造个天马行空的东东出来也不一定哦，期待你在评论贴出你所认为牛逼的伪元素应用哈。
