Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to only change the color of marker (dots) when using display list-item?

I am using a display:list-item for the div pseudo-element::before. We can style the shape of the marker either disc or square…

.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>

Can we change the color of marker without changing the content color (without using list-style-image)?

Tags:

2

Answers


  1. 0

    Not as you have it, pseudo-elements can’t have pseudo-elements (like ::marker) as would be required here.

    Swap out the pseudo-element for a span instead.

    .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>
    Login or Signup to reply.
  2. 0

    You can use an image but without introducing a real image. A gradient can do the job:

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search