需求用法出现的背景:
由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板页面比较多,所以想在样式中统一修改,就用到了:after这个伪类元素;
.cactive:after{
content: " ";
display: block;
width:40upx;
height:6upx;
background:#E12D40;
border-radius:4upx;
overflow: hidden;
margin:0 auto;
}
原理:
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;
}