css - 绝对位置对伪元素有什么影响

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 方 block 中的附加表格是由于 content:"" 带来的空文本行。

这在检查元素时是可见的:

after 元素不是绝对定位的，所以它被流插入(这个“正方形”比另一个高)。

正如@talya-s 所说，font-size: 0 会修复它，奇怪的是 height: 0 不会，除非你真的把一些文本 (当然，这没有任何意义。