nmtysh.log

Tech系のネタや日々の独り言などを書いています。

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 では見られません。

広告を非表示にする