这个应该还算蛮基础的用法，用 CSS 画多选按钮来保证所有浏览器的样式都一致：

<label class="checkbox">hover to simulate check action</label>

:root {
  font-size: 80px;
  --box-width: 1em;
  --box-height: 1em;
}
.checkbox {
position: relative;
display: inline-block;
padding-left: 1.5em;
vertical-align: middle;
cursor: pointer;
}
.checkbox::before,
.checkbox::after {
position: absolute;
top: 50%;
left: 0;
margin-top: calc(-0.5 * var(--box-height));
content: "";
box-sizing: border-box;
width: var(--box-width);
height: var(--box-height);
}
.checkbox::before {
border: .0625em solid #e0e0e0;
box-shadow: 0 0 .0625em 0 rgba(0, 0, 0, .1);
background-color: #fff;
border-radius: .2em;
}
.checkbox:hover::after {
margin-top: calc(-0.4  var(--box-height));
margin-left: calc(0.1  var(--box-width));
box-sizing: border-box;
width: calc(var(--box-width)  0.8);
height: calc(var(--box-height)  0.5);
border-left: .1875em solid #7b1451;
border-bottom: .1875em solid #7b1451;
transform: rotate(-60deg) skew(-20deg);
}

有没有什么更好的实现方式？另外还有哪些类似的“奇技淫巧”，欢迎各位 CSS 大佬来秀操作，想开开眼界~