如何在justify-content:space-between布局下让Flex项伪元素居中？

好问题！咱们先拆解一下当前遇到的两个核心问题：

1. 前三个列表项的圆点伪元素紧邻文本，没有处于列表项的中间位置
2. 因为前三个列表项带有伪元素（宽度更大），第四个没有，导致justify-content: space-between无法让四个列表项均匀对齐

问题根源 #

• 伪元素默认是作为文本的后缀节点，所以会紧跟在文本后面，自然不会自动跑到列表项的中间。
• 四个列表项的宽度不一致（前三个包含文本+圆点，第四个只有文本），导致space-between分配间距时，视觉上无法实现均匀对齐。

解决方案一：让列表项平分空间，伪元素与文本居中/分离 #

这个方案会让四个列表项均匀占据容器宽度，同时可以灵活控制伪元素的位置：

修改后的CSS代码：

div { 
  display: flex; 
  justify-content: space-between; 
  width: 100%; /* 确保容器占满可用宽度，让space-between生效 */
}
div li { 
  list-style: none; 
  display: flex; /* 开启列表项内部的flex布局 */
  align-items: center;
  flex: 1; /* 让每个列表项平分容器宽度，确保宽度一致 */
  justify-content: center; /* 让内部内容整体居中 */
  position: relative;
}
/* 给前三个列表项添加圆点伪元素，同时修复Font Awesome图标显示问题 */
.menu li:nth-of-type(1)::after, 
.menu li:nth-of-type(2)::after, 
.menu li:nth-of-type(3)::after { 
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; /* 免费版Solid图标必须加这个权重才能显示 */
    content: "\f111"; 
    color: #8f81ca; 
    font-size: 5px; 
    margin-left: 8px; /* 调整圆点与文本的间距 */
    
    /* 如果你想让圆点单独在列表项的正中间（和文本分离），可以替换成下面的绝对定位代码： */
    /* position: absolute;
    left: 50%;
    transform: translateX(-50%); */
}

解决方案二：固定列表项宽度，文本与伪元素居中对齐 #

如果希望伪元素保持在文本后方，同时让所有列表项整齐对齐，可以用固定宽度的方式：

修改后的CSS代码：

div { 
  display: flex; 
  justify-content: space-between; 
  width: 100%;
}
div li { 
  list-style: none; 
  width: 22%; /* 手动设置每个列表项的宽度，四个加起来接近100%，留出间距 */
  text-align: center; /* 让文本和伪元素整体居中 */
}
.menu li:nth-of-type(1)::after, 
.menu li:nth-of-type(2)::after, 
.menu li:nth-of-type(3)::after { 
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; /* 修复图标显示 */
    content: "\f111"; 
    display: inline-block; 
    color: #8f81ca; 
    font-size: 5px; 
    vertical-align: middle; 
    margin-left: 5px; /* 调整圆点与文本的间距 */
}

关键注意点 #

• 不要忘记给Font Awesome伪元素添加font-weight:900，否则免费版的Solid图标可能无法正常显示。
• 确保外层div有足够的宽度（比如width:100%），否则justify-content: space-between无法发挥作用。

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