The new design for a website I’m working on calls for the ability to style bullets and the following list-item text with different colors, which isn’t an easy task for your plain-Jane CSS unless you use images for your bullets. This is not desirable because each section of the site has a different theme color, so I’d have to create and manage bullet images for every color used. Not to mention the extra HTTP requests which slow pages down. But there’s a better way, and it even degrades gracefully with older browsers!
This image shows what the end result should look like. This special bullet styling should only be applied to the user-generated content (UGC), like pages and posts. Nav items, and other cases where <ul>‘s are used for semantic purposes, should not use this styling.
To make this happen, I added a .ugc CSS class to the container element for the post and page text, and then added the appropriate stylesheet rules to any list-item elements within.
<div class="ugc">
Some content here.
<ul>
<li>A list item.</li>
<li>Maybe another list item.</li>
<li>Just one more item.</li>
</ul>
No more content after this.
</div>
/* User-generated content */
.ugc ul {list-style: none;}
.ugc li {position: relative;}
.ugc li:before {position: absolute;top: 6px;margin: 0 0 0 -12px;width: 5px;height: 5px;background: @purple;content: "";.border-radius(3px);
/* accommodate Camino */
vertical-align: middle;
display: inline-block;
}
/* Fix for < IE8 */
.lt-ie8 .ugc ul {list-style: disc outside;margin:inherit;padding:inherit;}
.lt-ie8 .ugc li {position: inherit;margin:inherit;padding:inherit;display:inherit;list-style:disc outside;vertical-align:inherit;}
You’ll see that I first remove list-style from all <ul>‘s within a .ugc container by setting it to “none”. Adding the “position: relative;” style to the <li>‘s allows for me to use it as an origin for some absolute positioning with other elements. The trick to using different colors with bullets and text is to create pseudo-elements for the bullets using the “:before” pseudo-selector. The .ugc li:before selector shown above defines a new element created right from CSS, absolutely positioned from the <li> element, with a width and height of 5px, a purple background and a border radius relative to the size so as to make the element appear circular. Cool, huh?
(Note: Ignore the “@purple” color and what looks like incorrect border-radius syntax, this is LESS syntax which gets compiled correctly to the correct CSS, including browser-specific prefixes.)
You’ll also see some fallback code for IE browsers before IE8, which is fairly self-explanatory. I conditionally add CSS classes to IE browsers a la Paul Irish’s elegant solution, and so older, crappy browsers can also enjoy the separately colored bullets.
Of course, I realized that those cool styles apply to all of the targeted list-item elements within my user-generated content, and sometimes they shouldn’t. If you drop some extra page navigation within the element having the .ugc class, or perhaps paste a code snippet to show off your own cool coding tricks, you’ll need to remove your cool bullets. For example, if I have some Twitter Bootstrap tabs that get mixed up with my content via a WordPress shortcode or something, here’s how I’d remove the bullets that will show up (and not be easy to track down with Firebug):
/* Remove bullets from nav */
.ugc .nav-tabs > li:before, .ugc .nav-pills > li:before{display:none;}
Just use those same :before pseudo-selectors and set their display property to “none”. Done and done!