CSS：被以下元素推后

Question

我使用after元素在h2元素下显示边框，但出于某种原因，after元素被以下{{1}下推/ elements / text。

图片说明：

为什么会这样？我的代码怎么了？

divs

提前感谢！

Answer 1

为什么不使用border-bottom: 4px solid yellow; css？

Answer 2

问题是在这种情况下绝对位置与其父“H2”无关为了解决这个问题

h2{
   position:relative;
}

h2:after {
    position: absolute;
    height: 4px;
    display: block;
    bottom:-20px;
    width: 200px;
    background: yellow;
    content: '';
} 
h2{
position:relative;
}

<h2>title</h2>