I was wondering if there is a way to change the color on the bullets in a list.
I have a list like this:
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>
It is not possible for me to insert anything in the li's such as a 'span' og a 'p'. So can I change the color of the bullets but not the text in some smart way?
You can use the ::marker CSS pseudo-element to select the marker box of a list item (i.e. bullets or numbers).
ul li::marker {
color: red;
}
Note: At the time of posting this answer, this is considered experimental technology and has only been implemented in Firefox and Safari (so far).
I tried this today and typed this:
I needed to display color markers in my lists (both bullets and numbers). I came upon this tip and wrote in in my stylesheet whith mutualization of the properties:
ul,
ol {
list-style: none;
padding: 0;
margin: 0 0 0 15px;
}
ul {}
ol {
counter-reset: li;
}
li {
padding-left: 1em;
}
ul li {}
ul li::before,
ol li::before {
color: #91be3c;
display: inline-block;
width: 1em;
}
ul li::before {
content: "\25CF";
margin: 0 0.1em 0 -1.1em;
}
ol li {
counter-increment: li;
}
ol li::before {
content: counter(li);
margin: 0 0 0 -1em;
}
I chose a different character to display a bullet, watching it here. I needed to adjust the margin accoardingly, maybe the values won't apply with the font you chose (the numbers use your webfont).
Inline version, works for Outlook Desktop:
<ul style="list-style:square;">
<li style="color:red;"><span style="color:black;">Lorem.</span></li>
<li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>