为什么设置margin-bottom的h2元素的::after伪元素会紧贴在其下方

核心原因 #

• ::after伪元素的渲染规则是作为绑定元素的最后一个子级内容插入，而非在元素盒模型的外部排列。你可以把当前的结构等效理解为下面的写法：

<h2>
  Main h2 heading
  <span class="fake-after"></span>
</h2>

• 你给h2设置的margin-bottom: 40px是h2整个盒模型的最外层下边距，作用于h2整体和它后续的兄弟元素之间，自然不会作用在h2内部的文本内容和::after伪元素之间，这就是你看到二者紧贴的原因。

额外代码修正 #

你给h2元素设置的content: "main h2";是无效属性，content仅对::before/::after这类伪元素生效，普通DOM元素添加该属性不会产生任何效果，可以直接删除。

解决方法 #

如果要在h2文本和底部绿色条之间产生40px间距，直接给::after伪元素加上上边距即可，修改后代码如下：

h2::after {
    display: block;
    background-color: #4cd137;
    height: 5px;
    width: 250px;
    content: " ";
    margin: 40px auto 0; /* 把原有的0 auto改成40px auto 0，新增40px上边距 */
}

内容的提问来源于stack exchange，提问作者user14624278