Trouble with z-indexing pseudo elements.

Pseudo elements are great little things, they can help you make nice little graphical feathers without writing extra markup, or they can provide description elements putting url(), attr(), counter() into content property.

But when making flags or some similar extra graphical feathers, pseudo class element seems to have larger z-index then his parent element, which defeats the purpose, so this is how you make it better :)

1. Parent element must have z-index set.
2. Pseudo patent element must not have defined z-index
3. Pseudo element must have z-index set to negative value

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    z-index: 1;
    background-color: blue;
    margin-left:35%;
}

#pseudo-parent {
    position: absolute;
}

#pseudo-parent:after {
    content: "";
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    z-index: -1;
    background-color: red;
    top:0;
    left:-25px;
}