a, a > span {
  position: relative;
  color: inherit;
  text-decoration: none;
  line-height: 24px; }
  a:before, a:after, a > span:before, a > span:after {
    content: '';
    position: absolute;
    transition: transform .5s ease; }

.effect-1 {
  padding-top: 10px; }
  .effect-1:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: black;
    transform: scaleX(0); }
  .effect-1:hover:before {
    transform: scaleX(1); }

.effect-2 {
  padding: 10px; }
  .effect-2:before, .effect-2:after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-color: black; }
  .effect-2:before {
    border-width: 2px 0 2px 0;
    transform: scaleX(0); }
  .effect-2:after {
    border-width: 0 2px 0 2px;
    transform: scaleY(0); }
  .effect-2:hover:before, .effect-2:hover:after {
    transform: scale(1, 1); }

.effect-3 {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 5px;
  overflow: hidden; }
  .effect-3:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: black;
    transform: translateX(-100%); }
  .effect-3:hover:before {
    transform: translateX(0); }

.effect-4 {
  padding: 10px;
  display: inline-block;
  overflow: hidden; }
  .effect-4:before, .effect-4:after {
    left: 0;
    width: 100%;
    height: 2px;
    background: black; }
  .effect-4:before {
    bottom: 0;
    transform: translateX(-100%); }
  .effect-4:after {
    top: 0;
    transform: translateX(100%); }
  .effect-4:hover:before, .effect-4:hover:after {
    transform: translateX(0); }

.effect-5 {
  display: inline-block;
  overflow: hidden; }
  .effect-5:before, .effect-5:after {
    right: 0;
    bottom: 0;
    background: black; }
  .effect-5:before {
    width: 100%;
    height: 2px;
    transform: translateX(-100%); }
  .effect-5:after {
    width: 2px;
    height: 100%;
    transform: translateY(100%); }
  .effect-5 > span {
    display: block;
    padding: 10px; }
    .effect-5 > span:before, .effect-5 > span:after {
      left: 0;
      top: 0;
      background: black; }
    .effect-5 > span:before {
      width: 100%;
      height: 2px;
      transform: translateX(100%); }
    .effect-5 > span:after {
      width: 2px;
      height: 100%;
      transform: translateY(-100%); }
  .effect-5:hover:before, .effect-5:hover:after, .effect-5:hover > span:before, .effect-5:hover > span:after {
    transform: translate(0, 0); }

.effect-6 {
  display: inline-block;
  overflow: hidden; }
  .effect-6:before, .effect-6:after {
    right: 0;
    bottom: 0;
    background: black;
    transition: transform .3s ease; }
  .effect-6:before {
    width: 100%;
    height: 0;
    transform: translateX(-100%);
    transition-delay: .9s; }
  .effect-6:after {
    width: 0;
    height: 100%;
    transform: translateY(100%);
    transition-delay: .6s; }
  .effect-6 > span {
    display: block;
    padding: 10px; }
    .effect-6 > span:before, .effect-6 > span:after {
      left: 0;
      top: 0;
      background: black;
      transition: transform .3s ease; }
    .effect-6 > span:before {
      width: 100%;
      height: 0;
      transform: translateX(100.1%);
      transition-delay: .3s; }
    .effect-6 > span:after {
      width: 0;
      height: 100%;
      transform: translateY(-100%);
      transition-delay: 0s; }
  .effect-6:hover:before, .effect-6:hover:after, .effect-6:hover > span:before, .effect-6:hover > span:after {
    transform: translate(0, 0); }
  .effect-6:hover:before {
    transition-delay: 0s;
    height: 2px; }
  .effect-6:hover:after {
    transition-delay: .3s;
    width: 2px; }
  .effect-6:hover > span:before {
    transition-delay: .6s;
    height: 2px; }
  .effect-6:hover > span:after {
    transition-delay: .9s;
    width: 2px; }

.effect-7 {
  display: inline-block;
  overflow: hidden; }
  .effect-7:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    transform: translateX(-100%); }
  .effect-7:after {
    content: attr(data-content);
    left: 0;
    top: 0;
    width: 0;
    margin: 12px;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    transition: width .5s ease; }
  .effect-7 > span {
    display: block;
    margin: 2px;
    padding: 10px;
    background: #000; }
  .effect-7:hover:before {
    transform: translateX(0); }
  .effect-7:hover:after {
    width: calc(100% - 24px); }

.effect-8 {
  display: inline-block;
  overflow: hidden; }
  .effect-8:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    transform: translateY(-100%); }
  .effect-8:after {
    content: attr(data-content);
    top: 0;
    left: 0;
    height: 0;
    margin: 12px;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    transition: height .5s ease; }
  .effect-8 > span {
    display: block;
    margin: 2px;
    padding: 10px;
    background: #000; }
  .effect-8:hover:before {
    transform: translateY(0); }
  .effect-8:hover:after {
    height: calc(100% - 24px); }

/*# sourceMappingURL=hover.css.map */