CSS3实现鼠标悬停显示扩展内容

我们在做导航标签的时候，有时会出现空间过于拥挤需要隐藏部分内容的情况，所以在这里我自己写了一个鼠标悬停显示扩展内容的效果，如下图所示。
 

总的来说效果还是比较好实现，但是比较头疼的是三角部分使用了伪元素::after，而对父元素设置 over-flow:hidden 时也会把伪元素给隐藏掉。最后想的办法是把文字和图标用一个 <span> 包裹住然后对其设置over-flow属性。

HTML代码：

1.     <div id="nav">   
2.        <a id="nav-main"><span><i class="icon-home"></i> 主界面</span></a>   
3.          <a id="nav-sum"><span><i class="icon-laptop"></i> 统计界面</span></a>   
4.    </div>    
5.   
6. CSS代码：   
7.   
8. /*******************************************************************************/  
9. /*********************************** nav **************************************/  
10. /*******************************************************************************/  
11. #nav{   
12.     box-sizing:border-box;   
13.     width:200px;   
14.     height:100%;   
15.     position:fixed;   
16.     padding-top:80px;   
17. }   
18. #nav a{   
19.     display:block;   
20.     width:30px;   
21.     height:52px;   
22.     position:relative;   
23.     margin-top:50px;   
24. }   
25. #nav a span{   
26.     display:inline-block;   
27.     width:46px;   
28.     height:50px;   
29.     font-size:1em;   
30.     font-weight:600;   
31.     color:rgba(255,255,255,0.9);   
32.     text-indent:3px;   
33.     line-height:52px;   
34.     cursor:pointer;   
35.     overflow:hidden;   
36. }   
37. #nav a span i{   
38.     font-size:1.3em;   
39. }   
40. #nav a::after{   
41.     content:'';   
42.     display:block;   
43.     width:0;   
44.     height:0;   
45.     position:absolute;   
46.     rightright:-32px;   
47.     bottombottom:0;   
48.     border-top:26px solid transparent;   
49.     border-right:16px solid transparent