Chrome中:before伪元素内list-style-type样式失效求助

针对你遇到的Chrome新版本中，通过:before伪元素结合display: list-item实现自定义项目符号失效的问题，这里提供几个稳定的替代/修复方案：

方案一：直接使用字符作为项目符号（最简洁兼容） #

放弃依赖list-style-type，直接在伪元素的content中指定方形符号，避免Chrome的渲染Bug：

li {
    list-style-type: none;
    padding-left: 1.5rem;
    position: relative;
}

li:before {
    content: "■"; /* 方形字符，也可替换为其他符号如 "●" */
    position: absolute;
    left: 0;
    width: 1.5rem;
    text-align: right;
    color: inherit; /* 继承文字颜色，保持统一 */
}

方案二：用背景绘制自定义项目符号（高度可控） #

如果需要更灵活的样式（比如调整大小、颜色、圆角），可以通过背景实现：

li {
    list-style-type: none;
    padding-left: 1.5rem;
    position: relative;
}

li:before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.3em;
    width: 0.7rem;
    height: 0.7rem;
    background-color: #333; /* 自定义颜色 */
    /* 可选：添加圆角、边框等样式 */
    /* border-radius: 2px; */
}

方案三：修复原方案的Chrome兼容性（临时方案） #

如果必须保留原思路，尝试给伪元素添加非空的content（比如空格），触发Chrome的正确渲染：

li {
    list-style-type: none;
    padding-left: 1.5rem;
}

li:before {
    content: " "; /* 替换为空内容为空格 */
    position: relative;
    left: -1.5rem;
    width: 1.5rem;
    height: 1.6em;
    margin-bottom: -1.6em;
    display: list-item;
    list-style-position: inside;
    text-align: right;
    list-style-type: square;
}

注意：方案三依赖Chrome对Bug的临时兼容，可能随版本更新再次失效，优先推荐方案一或二。

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