JSFiddle - React, Tailwind, and code Playground

by ytyaru

HTML

<h1>パンくずリスト</h1>

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

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

CSS

@charset "UTF-8";

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: ">";
}
li:hover {
    color: #FF0000;
}



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