css伪类元素：after 的多功能用法——任意大小的底边框

需求用法出现的背景：

由于项目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;

}

 

转载于:https://www.cnblogs.com/widgetbox/p/10451041.html