::before伪元素的margin-bottom属性不生效问题排查

你用绝对定位给标题加上方装饰线时，margin-bottom失效是因为绝对定位元素脱离了文档流，它的外边距不会影响父元素或其他元素的布局。要让线条和下方文本保持约0.5em的间距，有两种简单的解决办法：

方法一：用top定位+父元素内边距调整间距 #

把margin-top: -.5em换成top: 0，然后给父元素.section-title加padding-top预留空间，既能固定线条位置，又能保证和文本的间距：

.section-title {
  position: relative;
  padding-top: 1em; /* 数值可按需调整，包含线条高度+目标间距 */
}

.section-title::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  width: 3em;
  height: .2em;
  background: #ff0000;
  top: 0; /* 固定在父元素顶部 */
}

方法二：改用相对定位，让外边距生效 #

如果不想用绝对定位，直接给::before设置相对定位，margin属性就能正常控制间距：

.section-title::before {
  content: ' ';
  display: block;
  width: 3em;
  height: .2em;
  background: #ff0000;
  margin-bottom: 0.5em; /* 此处间距会正常生效 */
}

这种方法不需要给父元素加position: relative，实现更简洁。

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