Styling list items with before:

Caveat: Picklet Builder is being developed exclusively for recent WebKit-based browsers (currently Safari 5.0.1 and Chrome 5.0.375.127) on Mac OS X. There is no need for the site to render correctly on anything else. YMMV.

This morning, a little diversion into CSS. The goal is ordered lists with a background image like one of these buttons (taken from the excellent iPhone design reference iPhone GUI PSD 4.psd by teehan+lax).

The brute-force, no research method looked like this; an ordered list with a background-image.

<ol class="fail">
    <li>item one</li>
    <li>item two</li>
</ol> {
  padding-left: 40px;
} li {
  background-image: url('/static/icons/bullet_green.png');
  background-repeat: no-repeat;
  padding: 5px 0 5px 30px;

The list item text has been moved away from the background image, but the numbers aren’t repositionable.

The Google offered Dipak Suryavanshi‘s post Applying color to ordered list numbers, NOT content which suggested looking into the CSS :before pseudo-element. It is clearly explained at A List Apart in Taming Lists. Check it out if you want an explanation of how this works.

Here’s the implementation of background-image bulleted, numbered list items;

<ol class="green_bullet">
  <li>item one</li>
  <li>item two</li>

ol.green_bullet {
  counter-reset: item;
ol.green_bullet li {
  display: block;
  padding-bottom: 10px;
ol.green_bullet li:before {
  font-family: sans-serif;
  counter-increment: item;
  content: counter(item);
  color: white;
  padding: 5px 15px 5px 10px;
  background-image: url('/static/icons/bullet_green.png');
  background-repeat: no-repeat;

There’s an additional step if you require an unordered list within the bulleted <ol>, that doesn’t inherit the background image. It is necessary to explicitly clear the :before element for the child <ul>.

ol li ul:before {
  background: none;

This entry was posted in Coding, Picklet Builder. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *