使用Unicode字符作为列表项目符号时多行文本缩进异常求助

我来帮你搞定这个排版小麻烦！你现在遇到的是用:before伪元素添加Unicode符号作为列表项标记时的典型问题——默认情况下伪元素是行内元素，当列表项文本换行后，第二行及后续内容不会和第一行文本对齐，而是直接跑到项目符号的正下方。

下面给你两种实用的解决方案，任选其一都能完美解决问题：

方法一：绝对定位法（兼容性好） #

通过给列表项设置相对定位，把伪元素固定在左侧，同时给文本留出足够的左内边距，这样所有行都会自动缩进对齐：

ul {
  list-style: none;
  padding: 0;
}
ul li {
  position: relative;
  padding-left: 2em; /* 调整这个值控制符号和文本的间距 */
}
ul li:before {
  content: '\2713';
  position: absolute;
  left: 0; /* 把符号固定在列表项的最左侧 */
  margin-right: 1em; /* 可选：微调符号和文本的间距 */
}

方法二：Flex布局法（现代简洁） #

利用Flex布局的特性，让符号和文本分别占据独立的空间，文本换行后自然对齐到符号右侧：

ul {
  list-style: none;
  padding: 0;
}
ul li {
  display: flex;
  align-items: flex-start; /* 让符号和文本顶部对齐，避免符号居中导致的错位 */
  gap: 1em; /* 控制符号和文本之间的间距 */
}
ul li:before {
  content: '\2713';
  flex-shrink: 0; /* 防止符号被压缩变形 */
}

为什么原来的代码会出问题？ #

你之前的写法里，li:before是行内元素，它和文本在同一行流中，当文本换行时，新行的开头会回到容器的左边缘，而不是对齐到符号的右侧。上面两种方法都是通过改变元素的布局方式，让符号和文本的位置关系脱离行流，从而实现多行对齐的效果。

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