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

.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); }

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