<ol>
  <li>
    <p class="diplome">BAC S</p>
    <span class="point"></span>
    <p class="description">
      Ceci est la description du bac S
    </p>
  </li>
  <li>
    <p class="diplome">BTS / DUT</p>
    <span class="point"></span>
    <p class="description">En lien avec la biologie et/ou la zoologie</p>
  </li>
  <li>
    <p class="diplome">Licence</p>
    <span class="point"></span>
    <p class="description">En lien avec la biologie et/ou la zoologie</p>
  </li>
  <li>
    <p class="diplome">Master</p>
      <span class="point"></span>
    <p class="description">TEST</p></li>
  <li>
  <p class="diplome">Doctorat</p>
    <span class="point"></span>
    <p class="description">Souvent nécessaire pour pouvoir accéder aux concours d’embauche de centres de recherche tels que l’INRA ou le CNRS</p>
  </li>
</ol>

html, body {
  color: #681;
	background: #fff;
	min-width: 700px;
}

/* ---- Timeline ---- */
ol {
	position: relative;
	display: block;
	margin: 100px;
	height: 4px;
	background: #31708F;
}
ol::before,
ol::after {
	content: "";
	position: absolute;
	top: -8px;
	display: block;
	width: 0;
	height: 0;
  border-radius: 10px;
	border: 10px solid #31708F;
}
ol::before {
	left: -5px;
}
ol::after {
	right: -10px;
	border: 10px solid transparent;
	border-right: 0;
	border-left: 20px solid #31708F;
  border-radius: 3px;
}

/* ---- Timeline elements ---- */
li {
	position: relative;
	display: inline-block;
	float: left;
	width: 150px;
	font: bold 14px arial;
  height: 50px;
}
li .diplome {
  position: absolute;
  top: -47px;
  left: 36%;
  color: #000000;
}
li .point {
	content: "";
	top: -4px;
	left: 43%;
	display: block;
	width: 6px;
	height: 6px;
	border: 4px solid #31708F;
	border-radius: 10px;
	background: #fff;
  position: absolute;
}
li .description {
  display: none;
  background-color: #f4f4f4;
  padding: 10px;
  margin-top: 20px;
  position: relative;
  font-weight: normal;
  z-index: 1;
}
.description::before {
  content: '';
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #f4f4f4;
  position: absolute;
  top: -5px;
  left: 43%;
}

/* ---- Hover effects ---- */
li:hover {
	cursor: pointer;
  color: #48A4D2;
}
li:hover .description {
  display: block;
}