<div class="akila-1">
  <a href="#">
  <span class="tonkiy">ссылка</span><span class="esadun"> - one</span>
  </a>
  <p>подчеркивание слайда</p>  
  </div>
   
  <div class="akila-2">
  <a href="#">
  <span class="tonkiy">ссылка</span><span class="esadun"> - two</span>
  </a>
  <p>изменение цвета света</p>  
  </div>
   
  <div class="akila-3">
  <a href="#">
  <span class="tonkiy">ссылка</span><span class="esadun"> - three</span>
  </a>
  <p>жирное подчеркивание</p>  
  </div>

  <div class="akila-4">
  <a href="#">
  <span class="tonkiy">ссылка</span><span class="esadun"> - four</span>
  </a>
  <p>изменение цвета подчеркивания</p>  
  </div>

  <div class="akila-5">
  <a href="#">
  <span class="tonkiy">ссылка</span><span class="esadun"> - five</span>
  </a>
  <p>три + четыре</p>  
  </div>

  <div class="akila-6">
  <a href="#">
  <span class="tonkiy">ссылка</span><span class="esadun"> - six</span>
  </a>
  <p>незначительное увеличение</p>  
  </div>

  <div class="akila-7">
  <a href="#">
  <span class="tonkiy">ссылка</span><span class="esadun"> - seven</span>
  </a>
  <p>сердцебиение</p>  
  </div>

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,900);

html, body {
  height: 100%;
  margin: 0;
  font-family: Lato;
  color: white;
  background: #2d2d2d;
}

a {
  text-transform: uppercase;
  font-size: 36px;
  color: white;
  text-decoration: none;
  position: relative;
  display: block;
}

p {
  font-weight: 100;
  font-size: 80%;
  margin: 1px;
}

[class^="akila-"] {
  display: inline-block;
  margin: 2em
}

/* akilaone */
.akila-1 a:before, .akila-1 a:after {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0;
  width: 0;
}

.akila-1 a:before { left: 0; }
.akila-1 a:after { right: 0; }

.akila-1 a:hover:before, .akila-1 a:hover:after {
  width: 50%;
}

.akila-1 a:before, .akila-1 a:after {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* akilatwo */
.akila-2 a:hover {
  color: #5CAAEF;
}

.akila-2 a:before {
  content: '';
  border-bottom: solid 1px #5CAAEF;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
   
  opacity: 0;
}

.akila-2 a:hover:before {
  opacity: 1.0;
}

.akila-2 a, .akila-2 a:before {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* akilathree */
.akila-3 a:before {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.akila-3 a:hover:before {
  -webkit-transform: scaleY(4);
  -moz-transform: scaleY(4);
  -ms-transform: scaleY(4);
  -o-transform: scaleY(4);
  transform: scaleY(4);
}

.akila-3 a:before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* akilafour */
.akila-4 a:before {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.akila-4 a:hover:before {
  border-bottom: solid thin #5CAAEF;
}

.akila-4 a:before {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* akilafive */
.akila-5 a:before {
  content: '';
  border-bottom: solid 1px white;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.akila-5 a:hover:before {
  -webkit-transform: scaleY(4);
  -moz-transform: scaleY(4);
  -ms-transform: scaleY(4);
  -o-transform: scaleY(4);
  transform: scaleY(4);
  border-bottom: solid tonkiy #5CAAEF;
}

.akila-5 a:before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* akilasix */
.akila-6 a:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);  
}

.akila-6 a {
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

/* akilaseven */
.akila-7 a:before {
  content: '';
  border-bottom: solid 1px #d9534f;
  position: absolute;
  bottom: 0; left: 30%;
  width: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);  
}

.akila-7 a:hover:before {
  border-bottom: solid tonkiy #d9534f;
  width: 40%;
  -webkit-animation: heartbeat-x 1.7s infinite ease-in;
  animation: heartbeat-x 1.7s infinite ease-in;
}

.akila-7 a:hover {
  -webkit-animation: heartbeat 1.7s infinite ease-in;
  animation: heartbeat 1.7s infinite ease-in;
}

@-webkit-keyframes heartbeat {
  0% { -webkit-transform: scale(1); }
  10% { -webkit-transform: scale(1.1); }
  20% { -webkit-transform: scale(1); }
  30% { -webkit-transform: scale(1.1); }
  40% { -webkit-transform: scale(1); }
}

@-webkit-keyframes heartbeat-x {
  0% { -webkit-transform: scaleX(0); }
  10% { -webkit-transform: scaleX(1); }
  20% { -webkit-transform: scaleX(0); }
  30% { -webkit-transform: scaleX(1); }
  40% { -webkit-transform: scaleX(0); }
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  10% { transform: scale(1.1); }
  20% { transform: scale(1); }
  30% { transform: scale(1.1); }
  40% { transform: scale(1); }
}

@keyframes heartbeat-x {
  0% { transform: scaleX(0); }
  10% { transform: scaleX(1); }
  20% { transform: scaleX(0); }
  30% { transform: scaleX(1); }
  40% { transform: scaleX(0); }
}