需求用法出現的背景：
由於項目UI的優化，項目中所有tab導航選中的狀態都是統一樣式書寫的，之前都是用的border-bottom，新的需求如果用以前的本辦法就是定位一個選中邊框在底部，但是涉及的模板頁面比較多，所以想在樣式中統一修改，就用到了：after這個偽類元素；
優化前：
優化后：
代碼：
優化前：
.discount_tab .tab_a.on spanr{ border-bottom:2px solid #39A1FB;}
優化后：
.discount_tab .tab_a.on span:after{ content:" "; width:1rem; height:3px; background-color: #39A1FB; margin:0 auto; display:block;}
原理：
1、如果需要用到偽類來表現樣式的話，display：block這里必須寫 ，因為偽類默認為行內元素；這里需要塊級元素；
2、content:"";必須要寫，它代表偽類的占位；
附加：三角也可以用偽類來寫
底為156px，高為10px的三角形
.selector:after{
position:absolute;
content:"";
left:0;
bottom:0;
width:0;
height:0;
border-left:78px solid transparent;
border-left:78px solid transparent;
border-left:10px solid #fff;
}