/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 102%;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;  
  background: -webkit-linear-gradient(left, #9105ea, #f73c95);
  background: -o-linear-gradient(left, #9105ea, #f73c95);
  background: -moz-linear-gradient(left, #9105ea, #f73c95);
  background: linear-gradient(to right, #9105ea, #f73c95);
  height: 3px;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
  transition: all 2s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
nav.fill ul li a:hover {
  color: #fff;
  z-index: 1;
}
nav.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}