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?
Try using this instead:
ul {
color: red;
}
I managed this without adding markup, but instead using li:before
. This obviously has all the limitations of :before
(no old IE support), but it seems to work with IE8, Firefox and Chrome after some very limited testing. The bullet style is also limited by what's in unicode.
li {_x000D_
list-style: none;_x000D_
}_x000D_
li:before {_x000D_
/* For a round bullet */_x000D_
content: '\2022';_x000D_
/* For a square bullet */_x000D_
/*content:'\25A0';*/_x000D_
display: block;_x000D_
position: relative;_x000D_
max-width: 0;_x000D_
max-height: 0;_x000D_
left: -10px;_x000D_
top: 0;_x000D_
color: green;_x000D_
font-size: 20px;_x000D_
}
_x000D_
<ul>_x000D_
<li>foo</li>_x000D_
<li>bar</li>_x000D_
</ul>
_x000D_
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 really liked Marc's answer too - I needed a set of different colored ULs and obviously it would be easier just to use a class. Here is what I used for orange, for example:
ul.orange {
list-style: none;
padding: 0px;
}
ul.orange > li:before {
content: '\25CF ';
font-size: 15px;
color: #F00;
margin-right: 10px;
padding: 0px;
line-height: 15px;
}
Plus, I found that the hex code I used for "content:" was different than Marc's (that hex circle seemed to sit a bit too high). The one I used seems to sit perfectly in the middle. I also found several other shapes (squares, triangles, circles, etc.) right here
Building on @ddilsaver's answer. I wanted to be able to use a sprite for the bullet. This appears to work:
li {
list-style: none;
position: relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 20px;
height: 20px;
left: -30px;
top: 5px;
background-image: url(i20.png);
background-position: 0px -40px; /* or whatever offset you want */
}
For me the best option is to use CSS pseudo elements, so for disc
bullet styling it would look like that:
ul {_x000D_
list-style-type: none;_x000D_
}_x000D_
_x000D_
li {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
li:before {_x000D_
content: '';_x000D_
display: block;_x000D_
position: absolute;_x000D_
width: 5px; /* adjust to suit your needs */_x000D_
height: 5px; /* adjust to suit your needs */_x000D_
border-radius: 50%;_x000D_
left: -15px; /* adjust to suit your needs */_x000D_
top: 0.5em;_x000D_
background: #f00; /* adjust to suit your needs */_x000D_
}
_x000D_
<ul>_x000D_
<li>first</li>_x000D_
<li>second</li>_x000D_
<li>third</li>_x000D_
</ul>
_x000D_
Notes:
width
and height
should have equal values to keep pointers roundedborder-radius
to zero if you want to have square
list bulletsFor more bullets styles you may use other css shapes https://css-tricks.com/examples/ShapesOfCSS/ (choose this which doesn't require pseudo elements to work, so for example triangles)
We can combine list-style-image
with svg
s, which we can inline in css! This method offers incredible control over the "bullets", which can become anything.
To get a red circle, just use the following css:
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
But this is just the beginning. This allows us to do any crazy thing we want with those bullets. circles or rectangles are easy, but anything you can draw with svg
you can stick in there! Check out the bullseye example below:
ul {_x000D_
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');_x000D_
}_x000D_
ul ul {_x000D_
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');_x000D_
}_x000D_
ul ul ul {_x000D_
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');_x000D_
}_x000D_
ul ul ul ul {_x000D_
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');_x000D_
}_x000D_
ul.bulls-eye {_x000D_
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');_x000D_
}_x000D_
ul.multi-color {_x000D_
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');_x000D_
}
_x000D_
<ul>_x000D_
<li>_x000D_
Big circles!_x000D_
_x000D_
<ul>_x000D_
<li>Big rectangles!</li>_x000D_
<li>b_x000D_
<ul>_x000D_
<li>Small circles!</li>_x000D_
<li>c_x000D_
<ul>_x000D_
<li>Small rectangles!</li>_x000D_
<li>b</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</li>_x000D_
<li>b</li>_x000D_
</ul>_x000D_
_x000D_
<ul class="bulls-eye">_x000D_
<li>Bulls</li>_x000D_
<li>eyes.</li>_x000D_
</ul>_x000D_
_x000D_
<ul class="multi-color">_x000D_
<li>Multi</li>_x000D_
<li>color</li>_x000D_
</ul>
_x000D_
Some browsers require width
and height
attributes to be set on the <svg>
, or they display nothing. At time of writing, recent versions of Firefox exhibit this problem. I've set both attributes in the examples.
A recent comment reminded me of encodings for the data-uri. This was a pain-point for me recently, and I can share a bit of information I've researched.
The data-uri spec, which references the URI spec, says that the svg should be encoded according to the URI spec. That means all sorts of characters should be encoded, eg <
becomes %3C
.
Some sources suggest base64 encoding, which should fix encoding issues, however it will unnecessarily increase the size of the SVG, whereas URI encoding will not. I recommend URI encoding.
Building off both @Marc and @jessica solutions - This is the solution that I use:
li {
position:relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 6px;
height:6px;
border-radius:6px;
left: -20px;
top: .5em;
background-color: #000;
}
I use em
for font sizes so if you set your top
value to be .5em
it will always be placed to the mid point of your first line of text. I used left:-20px
because that is the default position of bullets in browsers: parent padding/2
I know this is a really, really, old question but i was playing around with this and came up with a way i have not seen posted. Give the list a color and then overwrite the text color using ::first-line
selector. I'm no expert so maybe there is something wrong with this approach that I'm missing, but it seems to work.
li {_x000D_
color: blue;_x000D_
}_x000D_
_x000D_
li::first-line {_x000D_
color: black;_x000D_
}
_x000D_
<ul>_x000D_
<li>House</li>_x000D_
<li>Car</li>_x000D_
<li>Garden</li>_x000D_
</ul>
_x000D_
Building off @Marc's solution -- since the bullet character is rendered differently with different fonts and browsers, I used the following css3 technique with border-radius to make a bullet that I have more control over:
li:before {
content: '';
background-color: #898989;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-right: 4px;
top: 2px;
}
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>
Source: Stackoverflow.com