修改CSS li:before伪元素content后图标出现重复字符该如何解决？

问题根因 #

你当前使用的绿色对勾图标并非由content属性生成，是靠::before伪元素的边框属性拼接旋转得到的。修改content属性后添加的可渲染内容，会和原有边框绘制的对勾叠加，最终出现多余图案。

解决方案 #

方案1：完全替换为自定义图标/字符 #

如果不需要保留原有边框绘制的对勾，直接删除边框、变形相关属性，仅修改content取值即可，示例代码如下：

.check-list li:before {
    /* 替换为你需要的图标字符、iconfont编码等 */
    content: '✅';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    /* 按需调整样式 */
    font-size: 1.2rem;
    color: #00a8a8;
}

方案2：仅调整原有对勾的样式 #

如果不需要更换图标类型，仅要修改对勾的颜色、大小、位置，不要修改content属性，直接调整对应参数即可：

• 改颜色：修改border-color属性值
• 改大小：调整width、height、border-width属性值
• 改位置：调整top、left属性值

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