html - 塗りつぶし行でインデント

Question

<UL>インデントを線 (またはドットなど) で埋めることはできますか?

HTML

<ul>Foo
   <ul>Bar
      <ul>Foo
      </ul>
   </ul>
</ul>

結果

Foo 
-----Bar 
----------Foo

Answer 1

これはそれほど一般的な解決策ではありませんが、簡単に解決できます。

HTML:

<ul>Foo
   <ul>Bar
      <ul>Foo
      </ul>
   </ul>
</ul>

CSS:

ul {
    margin: 0;
    padding: 0;
}
ul > ul:before {
    content: "------";
}

ul > ul > ul:before {
    content: "------------";
}

このjsFiddleで自分の目で確かめてください!