CSS ::before伪元素生成圆点未显示在元素左侧问题咨询

问题原因 #

该表现和::before伪元素的命名没有关系，核心原因如下：

• ::before和::after的「前/后」定义只针对默认文档流中的插入顺序，只要给伪元素设置了position: absolute，它就会脱离正常文档流，位置完全由top/right/bottom/left这类定位属性决定，和伪元素的名称没有关联。
• 现有代码中给伪元素设置了right: -1px，就是明确让这个圆点定位在列表项<li>的右侧外侧1px的位置，所以才会出现在每个列表项的右边。这段代码本身是常见的「列表项之间加分隔圆点」的实现逻辑，额外加的last-child隐藏伪元素的规则，就是为了避免最后一个列表项右侧多出一个多余的圆点。

解决方案 #

如果要实现预期的左侧列表圆点效果，调整代码即可：

1. 先给<li>设置相对定位，作为伪元素的定位参照，同时给左侧留出圆点的显示空间：

footer .menu li {
  position: relative;
  padding-left: 12px;
}

2. 调整伪元素的定位属性，把right: -1px替换为left: 0，如果每个列表项前都需要显示圆点，可以删除最后一个元素隐藏伪元素的规则：

footer .menu li::before {
  content: "";
  width: 3px;
  height: 3px;
  background-color: #555;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0; /* 替换原有的right: -1px */
}

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