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

需求用法出现的背景：

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