body {
  height: 100%;
  width: 100%;
  padding: 100px 0;
  margin: 0;
  display: flex;
  justify-content: center;
  font-family: 'Libre Baskerville', serif;
  font-weight: 100;
}

span {
  font-size: 50px;
  /*  shadows render better in certain browsers than text, first rule is for older browser support  */
  color: #333;
  color: transparent;
  text-shadow: 0 0 #333, .08em 0 0 #fff, 0 0, -.08em 0 0 #fff;
  /*  gradient background allows us to use css only & re-position it  */
  background: -webkit-linear-gradient(#999, #999) center 1.09em no-repeat;
  background: linear-gradient(#999, #999) center 1.09em no-repeat;
  /*  can precisely control size in relation to the text  */
  background-size: 85% 1px;
  /*  now the underline supports transitions  */
  -webkit-transition: .2s ease;
  transition: .2s ease;
}

span:hover {
  /*  backgrounds won't size larger than 100%  */
  background-size: 95% 1px;
}