パンくずナビゲーションのCSS

こんにちは。今日は自分用にメモがてら「パンくずナビゲーションのCSS」について書こうと思います！

パンくずナビゲーション（以下パンくずナビ）は、現在のページがどの階層なのかを表すメニューで、よくこんな形かと思います。

あと、大体現ページ以外はリンクできるようになっていますよね。

ではさっそくコーディングを見ていきましょう〜！

コード

HTML編

        <div class="breadBlock">
          <ol class="itemList">
            <li><a href="#">HOME</a></li>
            <li><a href="#">会社概要</a></li>
            <li><span>沿革</span></li>
          </ol>
        </div>
　

CSS編

.breadBlock .itemList {
  display: flex;
  flex-wrap: wrap;
  background: #ccc;
}

.breadBlock .itemList > li {
  position: relative;
  line-height: 1.4;
}

.breadBlock .itemList > li + li:before {
  position: relative;
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-top: -0.3em; /*矢印の縦位置調節*/
  border: solid #212121;
  border-width: 1px 1px 0 0;
  vertical-align: middle;
  content: "";
  transform: scaleY(0.6) rotate(45deg);
}

.breadBlock .itemList > li span {
  display: inline-block;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #212121;
  line-height: 1;
}

.breadBlock .itemList a {
  display: inline-block;
  text-decoration: none;
}

@media only screen and (min-width: 769px), print {
  .breadBlock .itemList {
    padding: 15px 40px;
  }
  .breadBlock .itemList > li + li:before {
    margin-right: 15px;
    margin-left: 8px;
  }
}

少し解説しますね＾＾

少しでも参考になれば幸いです。では今日はここまで〜〜