css中position: absolute为什么会改变元素的形状?

Question

页面最终效果如下：

在完成下图红框部分时：

不加 position: absolute; 形状如下：

加 position: absolute; 后，形状如下：

就是 很想知道 为什么这么改会改变元素的形状（从椭圆到空心圆...）
页面最终效果传送门：使用css生成太极

感激看到这里，希望有大佬可以解释一下~

Answer 1

伪元素本身是行内元素，设置宽度和高度并不会起作用。你看下面，before并没有出现。

之后我取消position: absolute;的注释后它出现了

元素绝对定位后，脱离文档流，默认给它变为了块级元素，这里不多说，详情看css规范css2.1规范。

所以原因应该很明白了，在设置position: absolute;之前它没有宽高，你之所以能看到是因为border的原因，在设置这个属性后有了宽高。

它之所以是椭圆的，是因为border之后是长方形，不知道我说的清不清楚，不清楚你在说。

Answer 2

拜谢！ before伪类是行内元素学到了。 还是我基础不扎实呀....