<!--
CSS for common horizontal breadcrumb navigation, HTML provided by W3C.
Link: (https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#bread-crumb-navigation)
-->
<div>
  <nav class="breadcrumb">
    <h2>You are here:</h2>
    <ul>
      <li><a href="/">Main</a> →</li>
      <li><a href="/products/">Products</a> →</li>
      <li><a href="/products/dishwashers/">Dishwashers</a> →</li>
      <li><a>Second hand</a></li>
    </ul>
  </nav>
</div>

:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h2, ul, li, body {
  padding: 0;
  margin: 0;
}

div {
  background-color: #FEFEFE;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

.breadcrumb > h2, ul {
  display: inline-flex;
  list-style: none;
  font-size: initial;
  color: #270215;
}

.breadcrumb ul > li + li {
  margin-left: 5px;
}

.breadcrumb ul > li a[href] {
  text-decoration: none;
  position: relative;
  font-weight: 400;
  color: gray;
  z-index: 0;
}

.breadcrumb ul > li a[href]:hover,
.breadcrumb ul > li a[href]:focus {
  color: #C41C87;
  outline: none;
}

.breadcrumb ul > li a[href]:hover:before,
.breadcrumb ul > li a[href]:focus:before{
  transform: skew(-3deg) rotate(-1deg);
  border-bottom: 13px solid #D6DBD2;
  left: -3px; right: 2px;
  position: absolute;
  bottom: -1px;
  content: "";
  z-index: -1;
}

.breadcrumb ul > li a:not([href]) {
  font-weight: bold;
  color: #2C363F;
}