:after 的绝对位置

Question

我有一个非常简单的html代码

<div>
    <h1>This is a test </h1>    
  </div>

超级简单css

h1:after
{
background-color:red;
    content:'';    
    height:2px;
    width:100%;
    position:absolute;
}

如果我运行这段代码（至少在Chrome），文本后面有一条红线 但是，如果我删除线 "position:absolute"，这条红线也会被删除。

谁能帮我解释一下这种情况？

Answer 1

:after 和 :before 伪元素默认为 inline。默认情况下，内容为空，大小为零，您无法设置它们 width 和 height.

如果想看到这些伪元素，需要绝对定位或者设置display: table/block等