Skip to content

Instantly share code, notes, and snippets.

@karbassi
Created December 3, 2009 17:20
Show Gist options
  • Save karbassi/248346 to your computer and use it in GitHub Desktop.
Save karbassi/248346 to your computer and use it in GitHub Desktop.
This requires CSS2.1 "counter" and ":before". As of now, every browser except IE supports it.
Actually, IE8 supports it, if and only if IE8 is set to render as IE8.
You can check out the compatibility chart PPK made at his site.
http://www.quirksmode.org/css/contents.html
<!DOCTYPE html>
<html>
<head>
<title>Definition List numbering via CSS</title>
<style type="text/css">
/* http://www.w3.org/TR/CSS21/generate.html#counters */
dt:before {
content: counter(dt) ". ";
}
dt {
counter-increment: dt; /* Add 1 to dt */
}
</style>
</head>
<body>
<!-- http://www.w3.org/TR/html401/struct/lists.html#h-10.3 -->
<dl>
<dt>Dweeb</dt>
<dd>young excitable person who may mature into a <em>Nerd</em> or <em>Geek</em></dd>
<dt>Hacker</dt>
<dd>a clever programmer</dd>
<dt>Nerd</dt>
<dd>technically bright but socially inept person</dd>
</dl>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment