Flex布局ul列表li背景色无法占满左侧区域，需保留::marker实现方案

解决方案 #

你遇到的问题本质是默认状态下列表项的项目符号（::marker）渲染在li盒模型外部导致的，只需要修改两个配置即可在保留::marker实现的前提下解决背景覆盖问题：

1. 给ul添加list-style-position: inside规则，让::marker渲染在li的内部盒区域，li的背景色自然就能覆盖到项目符号所在的左侧位置
2. 调整marker和文本的间距替代原来的左内边距，避免布局错乱

修改后的完整CSS代码如下：

ul {
    display: flex;
    flex-direction: column;
    list-style-position: inside;
    /* 清除ul默认的左内边距，避免多余缩进 */
    padding-left: 0;
}

li {
    padding: 10px 0 10px;
    color: rgba(250, 250, 250);
}

::marker {
    color: rgba(250, 250, 250);
    font-size: 1em;
    content: '\f522';
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    /* 调整marker和文本的间距，替代原来的li左内边距效果 */
    margin-right: .5em;
}

li:nth-child(odd) {
  background-color: rgba(250, 250, 250, 0.4);
}

li:nth-child(odd)::marker {
    color: rgba(0, 0, 0);
}

如果需要调整左侧缩进量，直接修改::marker的margin-right或者li的padding-left即可，不需要改动现有::marker的核心逻辑。

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