主页 / coding / 问题 / 78609513
Accepted
Mehdi
Asked: 2024-06-12 03:50:34 +0800 CST

有没有办法在使用显示列表项时仅改变标记（点）的颜色？

  • 772

我正在使用 display:list-item 作为 div 伪元素::before。我们可以将标记的形状设置为圆盘或正方形...

.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;      /* or list-style-type: square; */
}
<div class="calendar"></div>

我们可以在不改变内容颜色的情况下改变标记的颜色（不使用列表样式图像）吗？

html

2 个回答

  1. Best Answer

    并非如您所愿，伪元素不能具有伪元素（如::marker），正如这里所要求的那样。

    将伪元素替换为span。

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

.status {
    display:list-item;
    position: absolute;
    bottom: 0;
    right: -100%;
    color: black;
    list-style-type: disc;      /* or list-style-type: square; */
}

::marker {
  color: red;
}
    <div class="calendar">
  <span class="status">Reserved</span>
</div>

    • 2

  2. 您可以使用图像，但无需引入真实图像。渐变可以完成这项工作：

    .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-image: radial-gradient(circle closest-side,red 90%,#0000);
    /* for a square
    list-style-image: linear-gradient(red 0 0);
    */
}
    <div class="calendar"></div>

    • 1

相关问题