generated content – Lea Verou

Flexible multiline definition lists with 2 lines of CSS 2.1

Reading Time: < 1 minute

If you’ve used definition lists (<dl>) you’re aware of the problem. By default, <dt>s and <dd>s have display:block. In order to turn them into what we want in most cases (each pair of term and definition on one line) we usually employ a number of different techniques:

Using a different <dl> for each pair: Style dictating markup, which is bad
Floats: Not flexible
display: run-in; on the <dt>: Browser support is bad (No Firefox support)
Adding a   after each <dd> and setting both term and definition as display:inline: Invalid markup. Need I say more?

If only adding  s was valid… Or, even better, what if we could insert  s from CSS? Actually, we can!

Better “CSS3 ticket-like tags”

Reading Time: < 1 minute

Today I stumbled upon this tutorial, which from the screenshot, looked very interesting. So, I read on, and to my horror I noticed the author suggesting some questionable practices, the worst of which was using 3 HTML elements for every tag, including nonsense markup like .

So, I thought I’d take a chance at trying to recreate this effect without any extra markup. And it turned out to be quite easy, although using CSS gradients limits browser support a bit (IE10, Firefox 3.6+, Chrome, Safari 5.1).

They have the same disadvantage as the originals: They depend on the background color. However, unlike the originals, they come at less code, they’re scalable without changing a million values (as shown in the “bigger” section) and of course, no extra markup.

You can see the results in the fiddle below:

Disclaimer: webdesign tuts+ occasionally has some nice tutorials. I didn’t write this post to attack them in any way.