Breadcrumb

Html

<div class="breadcrumb">
	<ul class="breadcrumb__list">
		<li class="breadcrumb__list-item">
			<a href="#">Frontpage</a>
		</li>
		<li class="breadcrumb__list-item">
			<a href="#">Subpage</a>
		</li>
		<li class="breadcrumb__list-item">
			<a href="#">Subpage 2</a>
		</li>
	</ul>
</div>

Scss

		
.breadcrumb {
	&__list {
		padding-left: 0;
	}

	&__list-item {
		display: inline-block;

		&:not(:last-child) {
			&:after {
				content: '';
				background-image: url('~@/assets/images/icons/angle.svg');
				width: .7rem;
				height: .7rem;
				background-size: 100% 100%;
				display: inline-block;
				margin: .1rem .5rem;
				vertical-align: middle;
			}
		}

		a {
			color: $color-black;
			font-size: 1.2rem;
			opacity: .6;
			transition: opacity $transition;
			text-decoration: none;

			&:hover {
				opacity: 1;
			}
		}
	}
}