nav a{
    position:relative;
    display:inline-block;
    outline:none;
    margin:0 -1.5px;
}

.cross{
    z-index:1;
    position:relative;
    display:inline-block;

    text-align:center;
}

.cross a{
    display:inline-block;
    padding:0 5px;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.cross a::before, .cross a::after{
    z-index:-1;
    position:absolute;
    top:50%;
    left:0;
    margin-top:-1px;
    width:100%;
    height:1px;

    content:'';

    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    transform: translateY(10px);

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.cross a:hover::before, .cross a:hover::after,
.cross a:focus::before, .cross a:focus::after{
    opacity: 0.7;
}

.cross a:hover::before, .cross a:focus::before{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cross a:hover::after, .cross a:focus::after{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}