CSS :after pseudo-element combined with [checked]: different after-elements not working?

Question

I am trying to kick up my Web forms by styling my own radiobuttons and checkboxes. To do this, I hide the radio/checkbox itself and create a state-indicating element on the label with the :after pseudo-class, like this:

.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;
}

Now, this works perfetly fine for the radios. I click on the label, and the little tickbox appears on the label, and on no other. But the problem are the checkboxes: While the checked ones still show the green tickbox, the unchecked ones, show none at all, and not the red one as it is supposed to be. it seems like the

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

part is not gripping at all, or like the :checked pseudo-class would overwrite its standalone.

Am i missing something major here?

Regards

Answer 1

Shoot! Found my own error by copying the code to jsfiddle like BoltClock suggested it, though not using it in the end.

The porblem is this part of code

.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;
}

To be exact, the position:relative. I needed this just to be able to set absolute positions on the :after elements (to show them -inside- the label) What i oversaw was, that this way, only the checked labels were made relative. Thus the absolute position of any :after elements created on unchecked elements resulted in positioning them outside the screen.

Solution: made every label position:relative from the beginning.

Thanks and sorry for inconvenience