:after 用于元素后面，插入内容。
案例：
HTML部分
<body>
<div class="bruce flex-ct-y" data-title="使用transform描绘像素边框">
<div class="onepx-border normal">1px</div>
<div class="onepx-border thin">0.5px</div>
</div>
</body>css部分
.onepx-border {
width: 200px;
height: 80px;
cursor: pointer;
line-height: 80px;
text-align: center;
font-weight: bold;
font-size: 50px;
color: #f66;
& + .onepx-border {
// +表示兄弟元素
margin-top: 60px;
}
&.normal {
border: 1px solid #f66;
}
&.thin {
position: relative;//给then这个class类名添加定位
&:after { // 伪类，表示在这个元素后面添加一个元素
position: absolute; // 相对于父元素进行绝对定位
left: 0;
top: 0;
border: 1px solid #f66;
width: 200%;
height: 200%;
content: ""; // 定义插入元素的内容
transform: scale(.5);
transform-origin: left top; //表示缩放的来自的位置
}
}
}效果如下：
