擬似要素before/afterを利用したパンくずリスト実装例

MDN Web Docsのパンくずナビゲーションで紹介されている実装をベースに、擬似要素before/afterを利用したパンくずリストの実装方法について紹介します。
なお、わかりやすさのため境界線や背景色つきでパンくずリストを実装しています。

Flexboxを利用する方法

MDN Web Docsのパンくずナビゲーションで紹介されている実装方法です。Flexboxと擬似要素を組み合わせてパンくずリストを作成しています。

具体的なコードは以下の通りです。

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <li class="lightgreen"><a href="" class="dotted item">Home</a></li>
    <li class="lightskyblue"><a href="" class="dotted item">Category</a></li>
    <li class="lightgreen"><a href="" class="dotted item">Sub-Category</a></li>
    <li class="lightskyblue"><span class="dotted item">Product</span></li>
  </ul>
</nav>

/*----------------------
リスト
---------------------- */
.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Flexboxにする */
}

/*----------------------
区切り文字
---------------------- */
.breadcrumb li::after {
  content: ">";
  background: red; /* 補助色 */
}

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

/*----------------------
パンくずリスト内の要素
---------------------- */
.item {
  padding: .5em 1em; /* 余白作成 */
}

/*----------------------
パンくずリスト内のaタグ
---------------------- */
.breadcrumb li a {
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


/*----------------------
要素をわかりやすくするための補助線・色
---------------------- */
.dotted {
  border-style: dotted;
}

.lightgreen {
  background: lightgreen;
}

.lightskyblue {
  background: lightskyblue;
}

See the Pen
breadcrumb-flexbox-item-padding by Toshiharu Nishina (@nishina555)
on CodePen.

上記のコードについて説明します。

liタグの親要素であるulタグにdisplay: flexを適用することでliタグを横並びにしています。
そして、aタグ・spanタグにpaddingを適用することでパンくずリストアイテムの余白を作成しています。

paddingで余白を作成しているため、aタグの余白部分もクリッカブルな領域となります。

paddingの代わりにmarginでも余白作成は可能です。marginで余白を作成した場合、aタグの余白部分はクリックできません。

参考: 擬似要素をまとめる

上記の実装で利用されている擬似要素は以下の通りです。

.breadcrumb li::after {
  content: ">";
}

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

上記は:notを利用することで以下のように書き換えられます。

.breadcrumb li:not(:last-child)::after {
  content: ">";
}

インラインを利用する方法

liタグの横並びはFlexboxの代わりにdisplay: inlineでも実現できます。

具体的なコードは以下の通りです。

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <li class="lightgreen"><a href="" class="dotted item">Home</a></li>
    <li class="lightskyblue"><a href="" class="dotted item">Category</a></li>
    <li class="lightgreen"><a href="" class="dotted item">Sub-Category</a></li>
    <li class="lightskyblue"><span class="dotted item">Product</span></li>
  </ul>
</nav>

/*----------------------
リスト
---------------------- */
.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  letter-spacing: -1em; /* インラインの余白対応 */
}

.breadcrumb li {
  display: inline; /* 横に並べる */
  letter-spacing: normal; /* インラインの余白対応 */
}

/*----------------------
区切り文字
---------------------- */
.breadcrumb li:after {
  content: '>';
  background: red; /* 補助色 */
}

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

/*----------------------
パンくずリスト内の要素
---------------------- */
.item {
  padding: .5em 1em; /* 余白作成 */
}

/*----------------------
パンくずリスト内のaタグ
---------------------- */
.breadcrumb li a {
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

/*----------------------
要素をわかりやすくするための補助線・色
---------------------- */
.dotted {
  border-style: dotted;
}

.lightgreen {
  background: lightgreen;
}

.lightskyblue {
  background: lightskyblue;
}

See the Pen
breadcrumb-inline-item-padding by Toshiharu Nishina (@nishina555)
on CodePen.

letter-spacingはインライン要素を並べたときに勝手に生まれる余白を取り除くために追加しています。
インライン要素の余白削除方法の詳細は【CSS】インラインブロック/インラインで勝手にできる余白の削除方法で解説しています。

参考: 擬似要素で余白を作成するパターン

パンくずリストとは？作り方とCSSデザインサンプル12選では、擬似要素でパンくずリストの余白を作成する方法が紹介されています。

以下では擬似要素で余白を作成する実装例について紹介します。

Flexboxの場合

Flexboxを利用した場合は以下のようになります。

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <li class="lightgreen"><a href="" class="dotted">Home</a></li>
    <li class="lightskyblue"><a href="" class="dotted">Category</a></li>
    <li class="lightgreen"><a href="" class="dotted">Sub-Category</a></li>
    <li class="lightskyblue"><span class="dotted">Product</span></li>
  </ul>
</nav>

/*----------------------
リスト
---------------------- */
.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/*----------------------
区切り文字
---------------------- */
.breadcrumb li::after {
  content: ">";
  padding: 0 0.2em; /* 余白作成 */
  background: red; /* 補助色 */
}

.breadcrumb li:last-child:after {
  content: "";
  padding: 0;
}

/*----------------------
パンくずリスト内のaタグ
---------------------- */
.breadcrumb li a {
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


/*----------------------
要素をわかりやすくするための補助線・色
---------------------- */
.dotted {
  border-style: dotted;
}

.lightgreen {
  background: lightgreen;
}

.lightskyblue {
  background: lightskyblue;
}

See the Pen
breadcrumb-flexbox-pseudo-padding by Toshiharu Nishina (@nishina555)
on CodePen.

インラインの場合

インラインを利用した場合は以下のようになります。

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <li class="lightgreen"><a href="" class="dotted">Home</a></li>
    <li class="lightskyblue"><a href="" class="dotted">Category</a></li>
    <li class="lightgreen"><a href="" class="dotted">Sub-Category</a></li>
    <li class="lightskyblue"><span class="dotted">Product</span></li>
  </ul>
</nav>

/*----------------------
リスト
---------------------- */
.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  letter-spacing: -1em; /* インラインの余白対応 */
}

.breadcrumb li {
  display: inline; /* 横に並べる */
  letter-spacing: normal; /* インラインの余白対応 */
}

/*----------------------
区切り文字
---------------------- */
.breadcrumb li:after {
  content: '>';
  padding: 0 0.2em; /* 余白作成 */
  background: red; /* 補助色 */
}

.breadcrumb li:last-child:after {
  content: '';
  padding: 0;
}

/*----------------------
パンくずリスト内のaタグ
---------------------- */
.breadcrumb li a {
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


/*----------------------
要素をわかりやすくするための補助線・色
---------------------- */
.dotted {
  border-style: dotted;
}

.lightgreen {
  background: lightgreen;
}

.lightskyblue {
  background: lightskyblue;
}

See the Pen
breadcrumb-inline-pseudo-padding by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

• CSS設計完全ガイド ～詳細解説＋実践的モジュール集
• MDN Web Docs『パンくずナビゲーション』
• mdn/css-examples/css-cookbook/breadcrumb-navigation–download.html
• パンくずリストとは？作り方とCSSデザインサンプル12選