Fall Sale! Code FALL2024 takes 25% OFF our Pro Plugins & Books »
Web Dev + WordPress + Security

Sexy HTML List Tricks

Behold the ubiquitous list elements, <ul> and <ol>! These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon.

But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable. We all know how to throw down a basic list:

<ul>
	<li>Pancakes</li>
	<li>Bananas</li>
	<li>Monkeys</li>
</ul>

Or even throw down some hardcore nested-list action:

<ul>
	<li>Pancakes
		<ol>
			<li>Swedish</li>
			<li>Blueberry</li>
			<li>Chocolate</li>
		</ol>
	</li>
	<li>Bananas
		<ol>
			<li>Manzano</li>
			<li>Plantain</li>
			<li>Cavendish</li>
		</ol>
	</li>
	<li>Monkeys
		<ol>
			<li>Spider</li>
			<li>Howler</li>
			<li>Squirrel</li>
		</ol>
	</li>
</ul>

This nested list markup will result in a unordered bulleted parent list with numerically ordered nested lists, resulting in something like this in a browser:

  • Pancakes
    1. Swedish
    2. Blueberry
    3. Chocolate
  • Bananas
    1. Manzano
    2. Plantain
    3. Cavendish
  • Monkeys
    1. Spider
    2. Howler
    3. Squirrel

Of course, we can style the display of this list configuration with some super-sexy CSS. For example, we can change the appearance of both ordered ( <ol> ) and unordered ( <ul> ) list markers by specifying one of the following types:

ul, ol {
	list-style-type: none;                 /* no list marker */
	list-style-type: disc;                 /* filled circles */
	list-style-type: square;               /* square markers */
	list-style-type: circle;               /* circle markers */
	list-style-type: inherit;              /* inherits style */
	list-style-type: decimal;              /* number markers */
	list-style-type: decimal-leading-zero; /* 01, 02, 03, .. */
	list-style-type: lower-alpha;          /* a, b, c, d, .. */
	list-style-type: lower-latin;          /* a, b, c, d, .. */
	list-style-type: lower-greek;          /* alpha, beta .. */
	list-style-type: lower-roman;          /* i, ii, iii, .. */
	list-style-type: upper-alpha;          /* A, B, C, D, .. */
	list-style-type: upper-latin;          /* A, B, C, D, .. */
	list-style-type: upper-roman;          /* I, II, III, .. */
	}

And, as if those options weren’t enough, CSS also enables us to use any list marker imaginable via the incredibly sexy list-style-image property. For example, we could create a small GIF image of a banana and use it as a list marker with the following CSS:

ul, ol {
	list-style-image: url(banana.gif);
	}

This technique is also possible by setting a background-image for the individual list ( <li> ) items, thereby providing a greater degree of presentational control:

ul li, ol li {
	background-image: url(banana.gif);
	}

We can even combine these methods to establish a built-in fallback mechanism that will enable the custom list-marker images to degrade gracefully to any list-style type. While we’re at it, let’s change the position of the list markers to appear within the list element itself:

ul {
	list-style-image: url(banana.gif);
	list-style-position: inside;
	list-style-type: circle;
	}

This will give us an unordered list that displays our custom banana.gif marker if supported, else the list markers will be displayed as circles. Further, the list markers in this example will be displayed on the inside of the list items. To conserve resources, we may combine these three rules into the following “shortcut” declaration:

ul {
	list-style: circle url(banana.gif) inside;
	}

If we wanted to display the list without markers, there are two ways to prevent long strings of list text from extending past the first line, for example:

  Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, 
Lorem ipsum blah blah blah, Lorem ipsum blah blah blah,

  Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, 
Lorem ipsum blah blah blah, Lorem ipsum blah blah blah,

  Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, 
Lorem ipsum blah blah blah, Lorem ipsum blah blah blah.

This case happens when the list-style-position is set to inside and the list text wraps onto subsequent lines. So, to alleviate this awkward list display, simply remove the list-style-position:inside declaration or explicitly specify it as list-style-position:outside;. Alternately, if you simply must use an inline display-type, you can prevent subsequent lines from “underlapping” the first line by using the oft-overlooked text-indent property:

ul {
	list-style-position: inside;
	text-indent: -0.7em;
	list-style: none;
	}

The text-indent technique is also useful when using generated content for your list markers. For example, by generating list markers with the following CSS:

ul {
	list-style: none;
	}
ul li:before {
	content: "\00BB \0020";
	}

You will see this for short list items:

  • Pancakes
  • Bananas
  • Monkeys

And this for long list items:

  • Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah. Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah.
  • Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah. Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah.
  • Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah. Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah, Lorem ipsum blah blah blah.

Ugh! There’s that nasty underlapping text wrap again. This happens because the generated content is inserted within the list elements. Unfortunately, setting the display-type to outside does not help in this scenario. Fortunately, we can easily resolve this issue by including a text-indent declaration to our previous list styles:

ul {
	text-indent: -1em;
	list-style: none;
	}
ul li:before {
	content: "\00BB \0020";
	}

Problem solved. At this point, you may be thinking, “what’s with all of that funky ‘generated content’ stuff?” If so, allow me to explain.

CSS 2.1 provides us with tools that enable us to insert various types of content into our markup. By combining the :before or :after pseudo-selectors and the content property, we can add alphanumeric and special characters into our document via the stylesheet. The characters that may be inserted may be alphanumeric text strings or escaped hexadecimal character equivalents such as the following:

  • \0020 — blank space, unicode =  
  • \21D3 — down arrow, unicode = ( ⇓ )
  • \00BB — right double angle quote, unicode = » ( » )

But wait, there’s more! Using CSS may be the modern, “Web-Standards” way of configuring the presentation of list elements, but there are also some interesting and useful inline tricks that, although deprecated, prove a delightful romp nonetheless. Let’s peek into the past, shall we?

First, the list-style type property may be specified inline for <ul> (and even <li>) elements:

<ul type=circle>
	<li>Telegraph</li>
	<li>Telephone</li>
	<li>Mobile phone</li>
</ul>

For unordered lists, the accepted values are circle, square, and disc. For ordered lists, the accepted property values are A, a, I, i, and 1. Here is an example:

<ol type=A>
	<li>Atari</li>
	<li>Nintendo</li>
	<li>Playstation</li>
</ul>

Here is a breakdown of the accepted values for the type property:

  • circle — circle markers
  • square — square markers
  • disc — disc markers
  • A — uppercase letters
  • a — lowercase letters
  • I — uppercase roman
  • i — lowercase roman
  • 1 — default markers

That’s all fine and well, but something that is far more useful is the ability to set specific values for various list items. By using the deprecated value attribute applied to the <li> element, we may set marker values as in the following example:

<ol>
	<li value=3>The marker for this item is the number 3</li>
	<li>The marker for this item is the number 4</li>
	<li>The marker for this item is the number 5</li>
	<li value=11>The marker for this item is the number 11</li>
	<li>The marker for this item is the number 12</li>
	<li>The marker for this item is the number 13</li>
</ol>

..which looks like this:

  1. The marker for this item is the number 3
  2. The marker for this item is the number 4
  3. The marker for this item is the number 5
  4. The marker for this item is the number 11
  5. The marker for this item is the number 12
  6. The marker for this item is the number 13

We can do something similar by using the start attribute, which enables us to specify the initial value of an ordered list. Here is an example:

<ol start=77>
	<li>The marker for this item is the number 77</li>
	<li>The marker for this item is the number 78</li>
	<li>The marker for this item is the number 79</li>
</ol>

..which produces this:

  1. The marker for this item is the number 77
  2. The marker for this item is the number 78
  3. The marker for this item is the number 79

This seems incredibly useful, such that I wonder if there is an equivalent way to accomplish this using modern methods, CSS and/or HTML.

One final trick before I close — older versions of HTML enable you to create “compact” lists using the compact attribute:

<ol compact>
	<li>Business</li>
	<li>Pleasure</li>
	<li>Nonsense</li>
</ol>

The idea here is that any list featuring the compact attribute will be displayed in a more compact fashion in the browser. Instead of applying the usual margin and padding to the list and its various items, the browser will reduce the amount of these properties to render a tighter, more “compact”-looking list.

Okay so I’ve got one more “sexy” trick for HTML lists: reversing the order of the numbers. Just add the reversed attribute, like so:

<ol reversed>
	<li>Coffee</li>
	<li>Whiskey</li>
	<li>Cool Aid</li>
	<li>Diet Coke</li>
	<li>Slurpeee</li>
</ol>

So that will reverse the order of the list items to look like this:

  1. Coffee
  2. Whiskey
  3. Cool Aid
  4. Diet Coke
  5. Slurpeee

So the list items will remain in the same order, but the numbers will be in reverse order. Possibly useful for shopping lists, favorite movies lists, and showing off how awesome HTML can be :)

Later days..

That does it for this fun-filled episode of Sexy HTML List Tricksstay tuned for more exciting content from Perishable Press.

About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
The Tao of WordPress: Master the art of WordPress.

24 responses to “Sexy HTML List Tricks”

  1. Jeff Starr 2009/08/29 9:12 pm

    @Barbara: Don’t forget the rollover sound effects and hot #FF0099 link colors ;)

    @Brad: My pleasure, of course :)

  2. Nice collection of useful attribute values. Most of the articles I have seen on lists go off into custom rabbit trails – but yours sticks by real valid CSS code. I have this bookmarked for reference.

  3. Aren’t the start, value, type and compact attributes deprecated now in favor of styles?

  4. Hi,
    there actually is a way to change the start value of a list. You can do it with CSS counter variables and the properties counter-reset and counter-increment in combination with the :before pseudo element.
    But of course that’s only a fiddly work-around since you have to disable the actual list-style and the numbers don’t behave like real list numbers. Unfortunately the custom numbers always have a position like list-style-type: inside; and it’s hard to fake outside list numbers.

  5. Cool men, thx

  6. kelsikkema 2010/01/20 4:56 pm

    Good article – thanks for posting. However, how do you handle validating your site then, if you’re using markup that has been deprecated (with the ol value attribute, etc.)? Shouldn’t validation be an important step in semantic and functional web development?

    @Manko – thanks for sharing the tip, I’ve been looking for a way to alter the value of lists with CSS.

  7. The START attribute for the OL element has been undeprecated –if that’s a word :-D – in HTML5.

    But I can’t remember if it is supported by all browsers. I would test in the usual suspect first if I wanted to use START.

    Thanks for the article!

  8. @kelsikkema: good point, but I really don’t use any of the deprecated list attributes for functional purposes anywhere on the site. They are only used here on this page for exemplary purposes.

    @demetris: that is great news about start and HTML5. Thanks for the tip!

  9. Penny Script 2010/05/05 9:37 pm

    Really cool tips!
    nice post.I really enjoyed reading the post and appreciate the information you are offering here.
    Thanks for sharing

  10. FEDAIL MATESIAN 2010/07/04 6:19 am

    if i make the list as horizontal list i can’t put any image beside the list could you help with that.

    li { text-indent:1em; list-style:circle url('img/rss_icon_small.jpg') inside; display:inline-block}

  11. johny why 2010/07/18 8:00 am

    nice! would be great if you could display a living sample with each technique.

  12. new homes for sale lancaster 2011/06/16 12:11 pm

    I definitely enjoy every little bit of it and I have bookmarked your blog.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
Went out walking today and soaked up some sunshine. It felt good.
I have an original box/packaging for 2010 iMac if anyone wants it free let me know.
Always ask AI to cite its sources.
All free plugins updated and ready for WP 6.6 dropping next week. Pro plugin updates in the works also complete :)
99% of video thumbnail/previews are pure cringe. Goofy faces = Clickbait.
RIP ICQ
Crazy that we’re almost halfway thru 2024.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.