Breadcrumb using flexbox

by Corentin Ballot

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 

<ul class="cloud_navigation_breadcrumb">
  <li class="cloud_navigation_breadcrumb_item">
    <a title="Documents" href="#/Documents">Documents</a>
  </li>
  <li class="cloud_navigation_breadcrumb_item">
    <a title="Cours" href="#/Documents/Cours">Cours</a>
  </li>
  <li class="cloud_navigation_breadcrumb_item">
    <a title="M2" href="#/Documents/Cours/M2">M2</a>
  </li>
  <li class="cloud_navigation_breadcrumb_item">
    <a title="S1" href="#/Documents/Cours/M2/S1">S1</a>
  </li>
  <li class="cloud_navigation_breadcrumb_item">
    <a title="Apprentissage" href="#/Documents/Cours/M2/S1/Apprentissage">Apprentissage</a>
  </li>
  <li class="cloud_navigation_breadcrumb_item">
    <a title="TP4_M2iWOCS_CORENTIN_BALLOT" href="#/Documents/Cours/M2/S1/Apprentissage/TP4_M2iWOCS_CORENTIN_BALLOT">TP4_M2iWOCS_CORENTIN_BALLOT</a>
  </li>
  <li class="cloud_navigation_breadcrumb_item">
    <a>datakeyboard_arrow_down</a>
  </li>
</ul>

CSS

body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}

.cloud_navigation_breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  font-size: 16px;
  padding: 0;
}

.cloud_navigation_breadcrumb_item {
  flex-shrink:5;
  align-self: center;
  list-style-type: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 16px;
  
  padding: 5px;
  font-size: 18px;
  border-radius: 2px;
  color: black;
  border: none;
  background-color: transparent;
  text-decoration: none;
}

.cloud_navigation_breadcrumb_item:first-child, .cloud_navigation_breadcrumb_item:last-child {
  flex-shrink: 0;
  text-overflow: clip;
}

.cloud_navigation_breadcrumb_item:before {
  content: '/';
}

.cloud_navigation_breadcrumb_item:first-child:before {
  content: '';
}

.cloud_navigation_breadcrumb_item > *:hover {
  background: rgba(158,158,158,.2);
}

.cloud_navigation_breadcrumb_item > * {
  padding: 5px;
  font-size: 18px;
  border-radius: 2px;
  color: black;
  border: none;
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
}