block元素增加设置了border和border-radius伪元素after，再设置绝对定位为什么会变成圆形？

Question

1.描述你的问题：

我有一个block元素，当我给这个元素设置:after伪元素后，并设置属性 border、border-radius后，再设置 absolute:position，会使这个伪元素变成圆形，这是为什么？

2.以下是我的代码：

<!-- HTML -->
<div class="container"></div>

/* CSS */
.container {
    width: 50px;
    height: 50px;
}
.container:after {
    border: 10px solid #000;
    border-radius:50px;
    content: "";
    position:absolute;
}

3.下面贴出效果图

测试环境：chrome（版本 70.0.3538.110（正式版本） （32 位））

伪元素无绝对定位时：

伪元素有绝对定位时：

Answer 1

我在 CSS: display:inline-block and positioning:absolute 上找到了为什么。伪元素是一个 inline 元素，因此它的高度是浏览器默认字体大小的高度 16px。当给 inline 元素设置 position：absolute 后，它脱离了文档流，并不再显示高度，除非设置 height 属性。因此在设置 position：absolute 后，它会作为一个 block 元素。 才会显示为一个圆形。

Answer 2

Emmm，为什么不会是圆形的呢？

你设置了边框宽度为10px border: 10px solid #000;
然后又设置了边框圆角大于10px / 2 = 5px border-radius:50px;
所以它有个圆形的边框，它的高度宽度又都为0，position:absolute;content: "";。

没有内容，没有宽高，边框是圆的，那它就应该是个圆形的吧。

Answer 3

为什么会变成圆形，你写的样式就是把它写成圆形的啊

Answer 4

你都设置border-radius了，它为什么不会变成圆形呢？你没有设置伪元素的宽高，那么它就由它的边框border撑开了，此时可以当作它宽高都是20px，然后你设置的border-radius大于它宽高的一半，它就变成圆形了呀。
https://jsfiddle.net/EverJust...