最近做一个自定义视觉效果的Switch组件，用到了 input:radio 和 label，并在label里用伪元素 :before 模拟状态的切换效果。

但是同事评审的时候说可以不用label，直接用input的微元素就可以实现。之前一直以为input这样的自闭合元素没有伪元素，做了个测试看一下到底有没有。

代码如下：

input:before 测试 input:before, input:after { content display width height outline input:after { width height outline-colorbutton color date datetime-local email file hidden image month number passwork range reset search submit text tel time number url week datetime checkbox radio

在 mac Chrome 里打开查看的效果如图：

可以看出来有的input支持有的不支持。让人比较诧异的是 input:button 居然不支持伪元素。