需求用法出现的背景：
由于项目UI的优化，项目中所有tab导航选中的状态都是统一样式书写的，之前都是用的border-bottom，新的需求如果用以前的本办法就是定位一个选中边框在底部，但是涉及的模板页面比较多，所以想在样式中统一修改，就用到了：after这个伪类元素；
优化前：
优化后：
代码：
优化前：
.discount_tab .tab_a.on spanr{ border-bottom:2px solid #39A1FB;}
优化后：
.discount_tab .tab_a.on span:after{ content:" "; 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;
0;
height:0;
border-left:78px solid transparent;
border-left:78px solid transparent;
border-left:10px solid #fff;
}