如何对li::marker元素设置样式，修改或移除其自带的margin-right属性

有三种常用的实现方案，可根据兼容性需求选择： #

方案1：直接修改::marker伪元素属性 #

适用现代浏览器（Chrome 86+、Firefox 68+、Safari 15.4+），直接覆盖::marker的默认右间距即可：

/* 全局生效可写 ul li::marker，也可指定特定类名的列表 */
.target-ul li::marker {
  margin-right: 0; /* 设为0即可完全关闭默认间距，也可自定义数值如2px调整大小 */
}

方案2：结合list-style-position间接调整 #

兼容大部分旧版本浏览器，通过修改项目符号的布局位置调整间距：

.target-ul {
  padding-left: 12px; /* 调整列表整体的左侧缩进值 */
}
.target-ul li {
  list-style-position: inside;
  padding-left: 2px; /* 该值即为项目符号和文本之间的间距，可自由调整 */
}

注意：该方案下如果列表项文本为多行，第二行及之后的内容会和项目符号对齐，而非和第一行文本开头对齐，有严格多行对齐需求的可以选择方案3。

方案3：自定义项目符号完全控制间距 #

兼容性最好，完全替换默认项目符号，所有间距都可自定义：

.target-ul {
  list-style: none; /* 隐藏默认的项目符号 */
  padding-left: 0;
}
.target-ul li {
  position: relative;
  padding-left: 16px; /* 列表整体左侧缩进 */
}
.target-ul li::before {
  content: "•"; /* 自定义符号内容，也可替换为数字、svg图标等 */
  position: absolute;
  left: 0; /* 调整符号的水平位置，和文本的间距可通过left和padding-left的差值控制 */
}

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