求助：绝对定位的:after伪元素无法在div下方居中

我来帮你搞定这个绝对定位伪元素的居中问题！你的问题主要出在两个地方：绝对定位的参考对象不对，以及用了不适合绝对定位的居中方法。

问题分析 #

1. 父元素未设置相对定位：你的.w元素没有position: relative，所以:after伪元素的绝对定位是相对于页面中最近的已定位父元素（如果没有的话就是整个文档），而不是你期望的.w元素。
2. margin: 0 auto对绝对定位无效：绝对定位的元素脱离了文档流，margin: auto无法触发水平居中的效果。

修复方案 #

我们只需要调整两处样式就能解决问题：

1. 给父元素.w添加position: relative，让伪元素的绝对定位以它为参考：

.w { 
  border: 1px solid red; 
  color: red; 
  display: inline-block; 
  padding: 15px; 
  height: 20px; 
  position: relative; /* 新增：设置相对定位作为伪元素的参考 */
}

2. 修改.e:after的样式，替换掉margin: 0 auto，用适合绝对定位的居中方式，同时调整bottom值让它出现在.w的正下方：

.e:after { 
  content: "W"; 
  display: block; 
  position: absolute; 
  line-height: 20px; /* 调整行高让文字垂直居中 */
  bottom: -30px; /* 调整为相对于父元素底部的距离，数值可根据需求调整 */
  left: 50%; /* 先让元素左边缘对齐父元素中心 */
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现水平居中 */
  border: 1px solid blue; 
  height: 20px; 
  width: 20px; 
  text-align: center; 
}

替代居中方式（可选） #

如果你不想用transform，也可以通过设置left: 0和right: 0配合margin: 0 auto来实现，前提是伪元素已经设置了明确的宽度（你已经设置了width:20px）：

.e:after { 
  /* 其他样式不变 */
  bottom: -30px;
  left: 0;
  right: 0;
  margin: 0 auto; /* 此时auto margin会生效 */
}

这样修改后，伪元素就能精准地居中显示在.w元素的正下方啦！

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