绝对位置对伪元素的影响是什么

Question

我在这里有2个div，使用css伪元素绘制形状。 两者都具有相同的属性，除了伪元素的位置属性，两种情况下的形状如何不同。

#withpos:after{
border-top: 100px solid red;
border-left: 100px solid red;
content: "";
position: absolute;
border-right: 100px solid green;
border-bottom: 100px solid green;
width: 0px;
  }

#withoutpos:after{
border-top: 100px solid red;
border-left: 100px solid red;
content: "";
border-right: 100px solid green;
border-bottom: 100px solid green;
width: 0px;
  }
#withoutpos{
margin-left:250px;
  margin-top:100px;
  }|

<div id="withpos"></div>
<div id="withoutpos"></div>

Answer 1

#withoutpos方格中的其他表单是由content:""带来的空行文字。

检查元素时可以看到：

after元素没有绝对定位，因此它被流动推动（这个＆＃34; square＆＃34;比另一个更高）。

正如@ talya-s所说，font-size: 0会修复它，奇怪地height: 0不会，除非你实际放了一些文字（当然没有任何意义）。< / p>