解决transformY移动::after伪元素后父元素底部多余空白问题

这个问题我之前帮不少开发者处理过，核心原因是CSS transform的特性：它只改变元素的视觉展示位置，不会修改元素在文档流中的占位空间。你的::after伪元素虽然被transformY向上移动了，但它原本占据的高度依然留在文档流里，把父div的底部撑出了空白。

下面给你两种针对性的解决方案，适配ClickFunnels的场景：

方案1：改用绝对定位（推荐） #

把伪元素设置为absolute定位，让它脱离文档流，这样就不会撑开父元素的高度。同时给父元素加相对定位，确保伪元素相对于父元素定位：

#sect-your-section-id {
  position: relative; /* 父元素设为相对定位，作为伪元素的定位基准 */
  /* 保留你原本的其他样式 */
}

#sect-your-section-id::after {
  content: '';
  position: absolute;
  bottom: 0; /* 让伪元素紧贴父元素底部 */
  right: 0; /* 四分之一圆靠右的话设置这个，靠左就用left:0 */
  width: 50px; /* 替换成你实际的圆尺寸 */
  height: 50px;
  background-color: #your-target-color; /* 替换成你的颜色 */
  border-top-left-radius: 100%; /* 实现四分之一圆的圆角 */
  /* 这里不需要transformY了，absolute定位直接控制位置更可靠 */
}

方案2：保留transform，裁剪并调整父元素高度 #

如果因为ClickFunnels的限制不能用绝对定位，可以试试这个方法：

• 给父元素加overflow: hidden，把伪元素超出的部分裁剪掉
• 手动减小父元素高度，减去伪元素上移的距离：

#sect-your-section-id {
  overflow: hidden; /* 裁剪超出父元素的伪元素部分 */
  height: calc(100% - 25px); /* 假设你用了transformY(-25px)，就减去对应数值 */
  /* 保留其他原有样式 */
}

#sect-your-section-id::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background-color: #your-target-color;
  border-top-left-radius: 100%;
  transform: translateY(-25px); /* 你的上移值 */
  margin-left: auto; /* 让圆靠右显示，靠左就去掉这个 */
}

ClickFunnels专属提示 #

ClickFunnels页面构建器经常会给元素自动添加内联样式，可能会覆盖你的自定义CSS。如果遇到样式不生效的情况，可以：

• 用更具体的选择器（比如加上父元素的类名）
• 必要时在样式属性后加!important（尽量少用，仅作为应急方案）

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