html - CSS :after is being pushed down by following elements

Question

我正在使用 after 元素在 h2 元素下显示边框，但由于某种原因 after 元素被下推通过以下 divs/elements/text。

图片说明:

为什么会这样？我的代码有什么问题？

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

} 

提前致谢!

Answer 1

问题是在这种情况下绝对位置不是相对于它的父“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>