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

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 元素不是绝对定位的，所以它被流推动（这个 "square" 比另一个高）。

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

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

what is the effect of position absolute on pseudo elements

css

pseudo-element