Opera Issue

by davidpauljunior

HTML

<ul>
    <li>
        <span class="large-square">
            <span class="square">
            </span>
        </span>
    </li>
    <li>
        <span class="large-square">
            <span class="square">
            </span>
        </span>
    </li>
</ul>

CSS

.large-square {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    background: red;
    border-
}
.square {
    display: block;
    width: 24px;
    height: 24px;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
}
.square:after {
    content:'';
    display: block;
    width: 10px;
    height: 10px;
    background: blue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5px 0 0 -5px;
}