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. 我在吠叫错误的树吗？ 提琴手

html 只是<div class="outerDot"></div>.

Answer 1

您必须添加一个content属性，并使其显示块：

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

这是你的小提琴：http: //jsfiddle.net/hV93X/2/