Абсолютного положения с: после

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.

Если вы хотите, чтобы эти pseudoelements, вы должны сделать их абсолютно позиционируемых или установить их display: table/block и т.д.