定義リストdlのリスト項目ごとに下線を引く方法

以前、最新情報リストを作るとき、下記のように、日付と、内容のペアごとに下線が引かれているデザインが上がってきたことがありました。

このように、日付と情報をペアにしたような情報を表示する場合、
私はほとんど定義リストを使っていました。
方法としては、dtにfloat:left;をかけ、ddを右に回り込ませ、それぞれに下ボーダーを指定するもの。その場合、たとえば下図のようにdtが1行でddが二行になってしまう場合はボーダーがもちろんズレます。

この状況を回避するすべを知らなかった私は、当時、

<dl><dt>2009年4月1日</dt><dd>入社式がありました。</dd></dl>
<dl><dt>2009年3月23日</dt><dd>卒業式がありました。</dd></dl>
<dl><dt>2009年1月31日</dt><dd>卒論発表会がありました。</dd></dl>

という暴挙に出ていました。
当時は、汚いコードだなとは感じつつ、デザインを犠牲にしたくないという思いが強くて、
これで実装していました。

が、先日、

<dl>
<dt>2009年4月1日</dt><dd>入社式がありました。</dd>
<dt>2009年3月23日</dt><dd>卒業式がありました。</dd>
<dt>2009年1月31日</dt><dd>卒論発表会がありました。</dd>
</dl>

のコードで下ボーダーを実現する表現を、社内のフロントエンドエンジニアの方に教えていただきました。

1. dtに幅を指定する。
2. ddに対し、dtの高さと同様の数値のネガティブマージン（padding-top）を指定。
3. ３．ddに対し、dtの幅と同じ数値のpadding-leftを指定。
4. ddに対し、border-bottomを指定。

こうすると、border-bottomはddにかかっているので、
ddの項目が増えたとしても線は段違いにならずまっすぐ引かれます。

dtの幅をemなど相対的な表記にすると幅が可変になるので、文字サイズの変化にも対応できます。
他にも、絶対配置と相対配置を駆使すれば実現可能だと思います。（未確認）

今まで、絶対配置やネガティブマージンにあまり良い印象がありませんでした。
理由としては、なんだかHTMLのデフォルトの配置を乱すイレギュラーなものだという見方があり、ブラウザ間で表示の差異が出そう、という気がしていたからです。

実際今回の例ではブラウザの差異は出なかったし、
多少、CSSが汚いかなぁという気もしますが、こうやって実装することができるんだなと感動しました。

最近制作から実を離していたので、新しい技術に目を向けることが多く、
そんな学習の仕方で良いのかなぁ、という疑問が湧いてきているころだったので、
この方法を教えてもらったときはかなり感動してしまいました。

技術的な面での発見はもちろん、
今までHTMLコードが汚かったのは、デザインのせいでも、HTMLの仕様のせいでもなく、
マークアップの知識が未熟な自分自身のせいなのだ、と身をもって感じて、
それはもう本当に、衝撃的でした。

結果的に言えば、コードが汚いのはコーダーの責任なのに、
そこから無意識のうちに逃げていたのかもしれません。

マークアップの楽しさを再発見できた気がしました。