使用display:list-item时如何单独修改标记点颜色？

当然可以实现，核心是用CSS的::marker伪元素——它专门用来选中list-item的标记部分，能单独设置样式，不会影响伪元素里的文本内容。

修改后的代码如下：

.calendar{
    display: block;
    position: relative;
    width: 100px;
    aspect-ratio: 1;
    background-color: green;
}

.calendar::before{
    content:"Reserved";
    display: list-item;
    position: absolute;
    bottom: 0;
    right: -100%;
    color: black; /* 内容保持黑色 */
    list-style-type: disc;
}

/* 单独给标记设置颜色 */
.calendar::before::marker {
    color: red; /* 这里改成你想要的标记颜色 */
}

<div class="calendar"></div>

这样设置后，伪元素里的"Reserved"文本还是黑色，而disc标记会变成你指定的颜色，完全符合你“不修改内容颜色、不使用list-style-image”的要求。

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