绝对位置：之后

Question

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

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

带有超级简单的css

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

如果我运行此代码（至少在Chrome中），文本后面会有一条红线 但是，如果我删除了行＆＃34; position：absolute＆＃34;，也会删除此红线。

任何人都可以帮我解释一下这种情况吗？

Answer 1

默认情况下，

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

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