CSS-Tricks: Style a List with One Pixel

Chris Coyier recently released a new article that covers an ingenious CSS trick that puts me in mind of the days of 1-pixel spacer.gif files and tiling graphics meant to replace the <hr> tag.

Basically it uses a one-pixel graphic and a bit of CSS to style a nested list element, with an end result that looks something like this:

CSS-Tricks 1px Nested List

That’s a semantically-correct <ul> element styled with one image and no additional markup. It’s so simple I wish I had thought of it… :)