CSS:after伪元素结合[checked]：不同的after元素不工作？

我试图通过设计自己的单选按钮和复选框来启动我的Web表单。 为此，我隐藏了radio/复选框本身，并使用：after伪类在标签上创建一个状态指示元素，如下所示：

.pn_multi label{
    display:    inline-block;
    border:     1px dotted #FFF;

    opacity:    0.6;

    text-align: center;
}
.pn_multi label:hover{
    border:     1px dotted #444;
    opacity:    0.8;
}

.pn_multi input[type=radio]:checked + label, .pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

/* generic icon */
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox] + label:after {

    display:    block;
    position:   absolute;
    right:      1px;
    bottom:     1px;
    overflow:   hidden;

        /* a lot more styling here, took out for space */
}

/* specific icon colors*/
.pn_multi input[type=checkbox] + label:after {
    content: "\2714  ";
    background: #FF9393;
    color:      #F22;
    border:     1px solid #F22;
}
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox]:checked + label:after {
    content: "X  ";
    background: #97FF97;
    color:      #063;
    border:     1px solid #063;
}

现在，这适用于收音机。我点击标签，小勾选框出现在标签上，而不是其他标签上。 但问题在于复选框： 当选中的仍然显示绿色勾选框时，未选中的则完全不显示，而不是应该显示的红色勾选框。看起来像是

.pn_multi input[type=checkbox] + label:after

零件根本不紧握，或者类似于：checked伪类将覆盖其独立类

我是不是错过了什么重要的东西

问候

开枪！ 通过像BoltClock建议的那样将代码复制到JSFIDLE，发现了我自己的错误，尽管最后没有使用它

问题在于这部分代码

.pn_multi input[type=radio]:checked + label, 
.pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

确切地说，位置：相对。我需要这样做只是为了能够在：after元素上设置绝对位置（在标签内部显示它们） 我监督的是，通过这种方式，只有选中的标签才是相对的。 因此，在未选中元素上创建的any:after元素的绝对位置导致将它们定位在屏幕之外

解决方案：使每个标签位置：从一开始就是相对的

---

感谢并为给您带来的不便表示歉意

您能在上演示一下吗？那会有帮助的。哦，很高兴看到你解决了它！我想你可以把它改成编辑答案。去吧！我会尽快=>声誉低于100的用户在提问后8小时内无法回答自己的问题。您可以在7小时内自行回答。在此之前，请使用评论或编辑您的问题。