如何为::marker伪元素设置外边距？自定义列表符号与文本间距调整

原因说明 #

::marker 伪元素的可设置属性存在官方限制，margin、padding 等常规盒模型属性不在其支持范围内，所以设置后不会生效。

解决方案 #

方案1：直接在自定义标记后加空格（最简单）

直接修改list-style-type的取值，在-后面补充对应数量的空格即可，无需额外编写其他样式：

ul li {
  /* 后面的空格数量按需调整，加的越多间距越大 */
  list-style-type: '-  ';
}

方案2：用::before伪元素实现（灵活度最高）

如果需要精确控制间距数值，或者后续要修改标记的颜色、大小等样式，可以关闭默认列表标记，用::before自定义实现标记，所有样式属性都可以自由调整：

ul li {
  /* 关闭默认列表标记 */
  list-style: none;
  /* 给文本预留标记位置，数值可自行调整 */
  padding-left: 1.2em;
  position: relative;
}

ul li::before {
  content: '-';
  position: absolute;
  left: 0;
  /* 这里修改数值就能直接调整标记和文本的间距 */
  margin-right: 8px;
}

方案3：给::marker设置padding-inline-start（兼容性稍差）

现代主流浏览器已经支持给::marker设置padding-inline-start属性实现间距，适合不想改动现有代码结构的场景，仅需注意旧版浏览器的兼容问题：

ul li::marker {
  padding-inline-start: 8px;
}

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