HTMLのリストを水平に表示してみた

CSSを使って。

Playground

See the Pen HTML.List.horizontal.201705121946 by ytyaru (@ytyaru) on CodePen.

ソースコード

<ul class="breadclambs">
    <li><span>root</span></li>
    <li><span>parent</span></li>
    <li><span>child</span></li>
</ul>

ul.breadclambs {
    list-style: none;
    margin: 0px;
    padding: 0em;
    padding-left: 0em;
    vertical-align:middle;
}
ul.breadclambs li {
    display: inline-block;
    margin-left: 0em;
    vertical-align: middle;
}
ul.breadclambs li:first-child:before {
    content: "";
}
ul.breadclambs li:before {
    content: ">";
}

• ulにlist-style: none;してリストのマークを消す
• liにdisplay: inline-block;で水平に表示する
• li:beforeにcontent: ">";してリストのマークとする

ついでにマウスオーバーで文字色を変える。

li:hover {
    color: #FF0000;
}

問題点

• マウスオーバーによる文字色変更をするとcontentの文字まで変わってしまう。変えたくない。
• >の後ろにはマージンがないのに前にはマージンがある。両方に等間隔なマージンがほしい
• 表示方向を逆にしたいとき、タグの記述順序やCSSのcontentのマークまで変更せねばならない。設定を1つ変更するだけで表示方向を変更できるようにしたい
• マウスオーバーで兄弟要素を表示できるようにしたい

所感

問題点が多すぎる。そもそも実装できるのか。どんな実装方法がありうるのか。どの実装方法を採用すべきなのか。