css
.border1px:after {
content: ' ';
box-sizing: border-box;
display: block;
position: absolute;
top: 0; left: 0;
width: 200%;
height: 200%;
transform: scale(.5);
transform-origin: left top;
pointer-events: none;
}
div { position: relative;width:100px;height:100px;}
div:after {border:1px solid #ccc;}
html
<div class="border1px"></div>
解释
- 将目标伪元素的尺寸 等于 目标的200%；再进行缩小一半；
1px 的边框 transform: scale(.5) -> 0.5px - 但是会有一个弊端： 伪元素因为position: absolute;处于最上层，点击的时候不会点到目标元素。
解决： 将需要点击的元素position: relative; z-index: 2; 层叠高于:after
网友评论