Question

html关于伪元素after的问题

想用css做一个checkbox复选框，一开始给框内的勾透明度为0，为什么点击后勾的透明度就为100了？谢谢大神解答，代码如下：
<div class="checkboxFive">
<input type="checkbox" value="1" id="checkboxFiveInput" name="" />
<label for="checkboxFiveInput"></label>
</div>
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #fff;
border:2px solid #12B7F5;
border-radius:45px;
}
.checkboxFive label:after {
opacity: 0;
content: '';
position: absolute;
width: 18px;
height: 9px;
background: transparent;
top: 5px;
left: 2px;
border: 3px solid #12B7F5;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
不好意思各位，刚看到下面还有一串代码，这串代码的意思是什么呀。

.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}

Answer 1

.checkboxFive类里类型为checkbox的input当被选中的时候，该input的兄弟元素label的after伪元素可见；input不被选中的时候label的after伪元素不可见

追问

你好，你的意思是当类型为checkbox的input选中时，就会默认使用label：after里的css吗？

我还有一个问题，就是我如果使用多个类型为checkbox的input，为什么我勾选除第一个以外的input但是第一个才会被勾选。如图，我点击第二个第三个input，但是还是只勾选了第一个，三个input代码完全一样。要另外设置什么吗？

谢谢

追答

你是点击的label吧，要点击input也就是才会有效果的。我看你给的图没有默认的小矩形框，所以我这里有套这样的解决方案：你可以把input的位置调整到圆圈的中间，同时设置z-index:90;并且也要给圆圈（label）设置z-index:89;  （input的z-index值比label的大就行，目的就是要让input在上面显示）。此时的代码（位置不对手动改下top、left值）：

.checkboxFive input{   position: absolute;left:3; top:3;width:24px;height:24px;border-radius:50%;cursor: pointer;z-index:90;}

.checkboxFive label {  z-index:89;position: absolute;width: 25px;height: 25px;top: 0;left: 0;background: #fff;border:2px solid #12B7F5;border-radius:45px; }

完成了这一步再给input设置个opacity:0;就完成了。代码：

.checkboxFive input{   position: absolute;left:3; top:3;width:24px;height:24px;border-radius:50%;cursor: pointer;z-index:90;opacity:0;}

.checkboxFive label {  z-index:89;position: absolute;width: 25px;height: 25px;top: 0;left: 0;background: #fff;border:2px solid #12B7F5;border-radius:45px; }