我可以使用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/