html - :after not working 上的 CSS 变换旋转

Question

我设计了一个复选框，并想用 :after 元素做一个复选标记。但是，我无法扭转局面。附加到 div 的相同样式效果很好。

使用样式:

content: '';
position: absolute;
width:.5em;
height:.2em;
transition: all .2s;
border-left: 2px solid red;
border-bottom: 2px solid red;
top: 0.4em;
left: 0.3em;
transform: rotate(-45deg);

在这里查看 Codepen:Codepen

Answer 1

多重转换会覆盖之前的转换。最好将它们写成速记

transform: rotate(-45deg) scale(1);