Taking a Shot at Better Bulleted Lists
Frankly, HTML unordered lists aren’t perfect. You have a few options for the types of bullets you can produce, and they often don’t align with what is designed. Here’s a relatively simple solution to custom styling those pesky bulleted lists.
The bullet in bulleted lists get their color from the LI and can't normally be styled separately, but what if you want the bullet a different color that the text?
Use New Markup
You could wrap the li content in another tag and target that tag with css, but obviously, this is not ideal since it is not maintainable.
li {
color: red;
}
li > div {
color: black;
}
Use CSS and “No New Markup”
For an "Outside Disc" you can use the code below.
ul {
padding-left: 1em;
}
ul > li {
/* needed to contain the new bullet */
position: relative;
/* turns off default styling */
list-style: none;
padding-left: .75em;
}
ul > li:before {
/* unicode bullet */
content: '\2022';
position: absolute;
left: 0;
/* beware of werewolves */
color: silver;
}
For an "Inside Disc" use this code.
ul {
padding-left: 1em;
}
ul > li {
list-style: none;
}
ul > li:before {
content: '\2022';
display: inline-block;
/* adjust as needed */
margin-right: .125em;
color: silver;
}
Making it more “bullet proof”
Should you use progressive enhancement or graceful degradation? It’s really up to you to decide which route you want to take. Your decision could be based on timeline, budget, supported browsers, or any number of reasons.