css伪类扩大点击区域

今天测试提了个bug，模态窗口关闭按钮的X太小（其实严重怀疑是测试手指太过粗大............）

言归正传，先上图

如图所示，这个X比较小，对于移动端而言，可能用户老点不到（姑且当点不到吧）。

那么我们的解决方案之一就是扩大点击区域，通过css伪类，使得点击到伪类时候仍能够出发X的点击事件。代码如下：

html

	

		×
	

css

javascript

function changeBgc(){
	document.getElementById("outDiv").style.backgroundColor = "yellow"; 
}

当然其他都是配菜，只要关注如下代码就行：

#outDiv:before{
	content: "";
	display: inline-block;
	height : 1.3rem;
	width  : .7rem;
}

然后附上实现后的图

宽度长度可以自己调节，after同理。这样点击伪类区域同样能够触发X的点击事件。