@geektim
Posted
This is a job well done. I couldn't even space the list-style markers away from the texts, nor could I change the color of the number-type markers from black. Nice work!
@Antonvasilache
Posted
@geektim Thanks!
Took me a long while to get it to work, to be fair.
I added the markers color to the parent element of each list:
.instructions-list {
list-style-type: decimal;
color: var(--Nutmeg); }
Then put a span on the list elements text and added padding to space it, and changed the color to make it different from the markers:
.prep-list-item span,
.ingredients-list-item span,
.instructions-list-item span {
padding-left: 1rem;
color: var(--Wenge-Brown);
font-weight: 400;
}
And this is the custom marker, smaller than the regular one
.prep-list-item::before,
.ingredients-list-item::before,
.instructions-list-item::before {
content: "•";
font-size: 1rem;
color: var(--Nutmeg);
}
Hope this helps.
Good luck!