如何让父元素高度包含::after伪元素？

我通过::after伪元素给div实现了圆形背景效果，但这个绝对定位的伪元素超出了父元素范围，和下方的段落产生重叠。尝试过overflow属性但没有效果，如何让父元素高度包含这个伪元素，避免和后续元素重叠？

解决方案 #

绝对定位的元素会脱离文档流，父元素不会自动计算它的高度，可通过以下三种方法解决：

方法1：给父元素添加底部内边距

如果伪元素尺寸固定，直接给父元素设置足够的padding-bottom，预留出伪元素的高度空间：

div{  
  position: relative;
  /* 伪元素高度200px，减去父元素内容高度60px，设置底部内边距 */
  padding-bottom: 140px;
}

div::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: red;
  left: 0;
  top: 0; /* 明确顶部定位，确保位置正确 */
}

/* NOT RELEVANT */
body{
  font-size: 1.5rem;
}

div{
  background-color: blue;
  color: white;
  line-height: 60px;
}

方法2：将伪元素改为相对定位

把伪元素的position改为relative，使其占据文档流空间，父元素会自动包含它。同时调整偏移量和层级，确保它在内容下方：

div{  
  position: relative;
}

div::after{
  content: "";
  position: relative; /* 修改为相对定位 */
  z-index: -1;
  display: block; /* 块级元素才能占据垂直空间 */
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: red;
  left: 0;
  margin-top: -60px; /* 向上偏移，覆盖父元素内容区域 */
}

/* NOT RELEVANT */
body{
  font-size: 1.5rem;
}

div{
  background-color: blue;
  color: white;
  line-height: 60px;
}

方法3：使用CSS Grid布局

父元素设置为display: grid，Grid容器会自动识别绝对定位子元素的尺寸，让容器高度适配：

div{  
  display: grid; /* 启用Grid布局 */
  position: relative;
}

div::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: red;
  left: 0;
  top: 0;
}

/* NOT RELEVANT */
body{
  font-size: 1.5rem;
}

div{
  background-color: blue;
  color: white;
  line-height: 60px;
}

方案说明 #

• 方法1：适合伪元素尺寸固定的场景，手动预留空间，简单直接。
• 方法2：无需修改父元素内边距，但需调整伪元素偏移量来精准定位。
• 方法3：利用Grid布局特性，自动适配绝对定位元素尺寸，代码简洁。

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