CSS3 でフォルダツリーみたいに見せる

CSS3 対応ブラウザ限定

<ul> の <li> 要素の前に"├"や"└"を付けてフォルダツリーみたいにしてみる。

ul.dir li:before {
  content: "├";
  margin: 0px 4px 0px 0px;
}
ul.dir li:last-child:before {
  content: "└";
  margin: 0px 4px 0px 0px;
}

こんな感じ

• A
• B
  • a
  • b
  • c
• C

とか

• A

残念ながら IE6 では見られません。