如何使用flexbox在::before伪元素生成的图标与文本之间添加间距

你只需要修改CSS部分的两个选择器配置即可，核心是把li元素设为flex容器，再给伪元素加右外边距控制间距：

.design .text ul li {
  padding: 15px 0;
  /* 新增以下两行 */
  display: flex;
  align-items: center; /* 保证图标和文本垂直居中对齐，可根据需求调整对齐规则 */
}

.design .text ul li::before {
  font-family: "font awesome 5 free";
  content: "\f108";
  font-weight: 900;
  /* 新增以下一行，数值可自行调整到合适的间距大小 */
  margin-right: 12px;
}

原理解释 #

• 默认li为块级元素，::before生成的图标和内部文本默认是行内级排列，设置display: flex后两者会变为flex容器的直接子项，布局控制更灵活
• 不需要额外修改HTML结构，纯CSS即可实现需求，也不会出现行高差异导致的图标文本错位问题

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