В этой серии заданий мы построим необычные хлебные крошки: ссылки в них будут выглядеть как стрелки.

Кстати, «хлебными крошками» называется навигационный блок, который показывает в каком разделе сайта вы находитесь, а также путь к этому разделу от главной страницы сайта. Крошки чем-то похожи на пути в файловой системе.

Этот элемент обычно верстают очень просто — последовательность ссылок внутри блока с классом. А вот вариантов оформления существует много. И мы разберём один из достаточно сложных.

Исходная заготовка включает в себя контейнер .breadcrumbs с тремя ссылками. Контейнер сделан блочно-строчным, а ссылки выстроены в ряд с помощью float. Также заданы некоторые исходные размеры, отступы и другие свойства.

Всё дополнительное оформление ссылок мы будем делать с помощью псевдоэлементов. И начнём с создания «стрелок» на концах ссылок с помощью ::after. И для этого на первом шаге зададим псевдоэлементам базовые размеры, позиционирование и фон.