パンくずリストとは
[メルカリより]https://www.mercari.com/jp/guide/car/transport_guide/
こういうのとか
[Web Design Trendsより]https://webdesign-trends.net/entry/2310
こういうのをパンくずリストという
名前の由来
童話「ヘンゼルとグレーテル」からきているとのこと。
パンくずリストを作ろう
bread-crumbs.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>パンくずリスト</title><linkrel="stylesheet"href="css/bread-crumbs.css"></head><body><divclass="bread-crumbs"><ul><li><ahref="#">ホーム</a></li><li><ahref="#">カテゴリー1</a></li><li><ahref="#">カテゴリー2</a></li><li>カテゴリー3
</li></ul></div></body></html>bread-crumbs.css
body{margin:0;}.bread-crumbsul{list-style:none;text-decoration:none;padding:0;margin:10px10px;}.bread-crumbsli{display:inline;}.bread-crumbsli:after{content:'>';color:#000000;}.bread-crumbsli:last-child:after{content:none;}.bread-crumbslia{text-decoration:none;color:#218b21;}.bread-crumbslia:hover{text-decoration:underline;}シンプルなパンくずリストができました
疑似要素を使って＞を表示していますが、下の記述がないと一番右側にも＞が表示されてしまいます。
やっていることは一番後ろのli要素の疑似要素は無し（非表示）ということです。
.bread-crumbs li:last-child:after {
content: none;
}
パンくずリストを作るのは別にli要素じゃなくてもいいのでは？と思ったのですが、Googleではli要素を推奨しています。
https://developers.google.com/search/docs/data-types/breadcrumb