css - ターゲットイメージを作成するためにafter疑似クラスを使用できますか？

Question

だから私はここにこのCSSを持っています：

.outerDot {
    width: 50px;
    height: 50px;
    background: white;
    border: 4px solid blue;
    border-radius: 50px;
}
.outerDot:after {
    background: blue;
    width: 20px;
    height: 20px;
}

そして、私はの.outerDot:after中に現れることを望み.outerDotます。私は間違った木を吠えていますか？ JsFiddle

htmlはただ<div class="outerDot"></div>です。

Answer 1

content属性を追加して、ブロックを表示する必要があります。

.outerDot:after {
    content: '';
    display: block;
    background: blue;
    width: 20px;
    height: 20px;
}

これがあなたのフィドルです：http：//jsfiddle.net/hV93X/2/