【CSS】擬似要素でパンくずリストを作成する方法

今回は、擬似要素を使ってパンくずリストを作成する方法についてまとめました。

パンくずリストはWEBサイトでよく用いられるパーツなので、実装できるようにしたいところです。

【CSS】擬似要素でパンくずリストを作成する方法

完成形はこちらです。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

擬似要素でパンくずリストが作成されていることがわかるでしょう。

HTML

ulタグの中にliタグをいくつか入れ子にしました。

<ul class="breadcrumb">
    <li>
        <a href="">トップページ</a>
    </li>
    <li>
        <a href="">イベント・観光</a>
    </li>
    <li>
        <a href="">施設情報</a>
    </li>
    <li>
        <a href="">ニュース</a>
    </li>
    <li>
        <a href="">お問い合わせ情報</a>
    </li>
</ul>

CSS

.breadcrumb {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding: 50px 20px;
}

.breadcrumb li {
  margin: 0px 5px 0px 0px;
  padding: 0px 20px 3px 0px;
}

.breadcrumb li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: black;    
}

.breadcrumb li a::after {
  display: block;
  content: '';
  position: absolute;
  top: 5px;
  right: -15px;
  width: 7px;
  height: 7px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.breadcrumb li:last-child a::after {
  content: none;
}

パンくずリストの矢印アイコンはaタグのafterの擬似要素を使って実装することが出来ます。

親要素にflex-wrap: wrap;を指定しているので、スマホ幅になってもレイアウトが崩れません。

あと矢印アイコンの仕組みは、borderを使ってレイアウトを表示し、それをrotateで回転させることで、上記のような矢印アイコンにすることが出来ます。

そして、最後のiタグのaタグの矢印アイコンは必要ないので、last-childで表示されないようにしましょう。

パンくずリストはWEB制作で頻出の実装なので、是非コピペして使ってみて下さい。

関連記事:

【CSS】display: flex;とmargin: auto;を使って要素の高さを揃える方法 【CSS/jQuery】左からハンバーガーメニューをアニメーションで表示させる方法 【CSS】aタグをクリックできる範囲をheaderの高さと一緒にする方法 【CSS】ニュースリストの作り方