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:

3. The marker for this item is the number 3
4. The marker for this item is the number 4
5. The marker for this item is the number 5
11. The marker for this item is the number 11
12. The marker for this item is the number 12
13. 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:

77. The marker for this item is the number 77
78. The marker for this item is the number 78
79. 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 Tricks — stay tuned for more exciting content from Perishable Press.

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.