.move-up:hover:after {
    bottom: 100%
}

.move-right:after {
    right: 50%
}

.move-right:hover:after {
    right: 0
}

.move-left:after {
    left: 50%
}

.move-vertical:after,
.move-vertical:before,
.move-vertical:focus:after,
.move-vertical:focus:before,
.move-vertical:hover:after,
.move-vertical:hover:before {
    width: 100%;
    height: 3px
}

.move-left:hover:after {
    left: 0
}

.move-vertical:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0
}

.move-vertical:before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 50%;
    left: 0
}

.move-horizontal:after,
.move-horizontal:focus:after,
.move-horizontal:focus:before,
.move-horizontal:hover:after,


.move-vertical:hover:after {
    top: 0
}

.move-vertical:hover:before {
    bottom: 0
}

.move-horizontal:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 50%
}

.move-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 3px;
    height: 100%;
    top: 0;
    left: 50%
}

.move-horizontal:hover:after {
    right: 0
}

























.pseudoem {
    color: red
}

.effect-demo {
    margin: 0 auto;
    color: #2C3E50;
    display: inline;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    user-select: none;
    transition: color 1s ease
}

.effect-demo.block,
.effect-demo:focus,
.effect-demo:hover {
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -ms-transition: color 1s ease;
    -o-transition: color 1s ease
}

.effect-demo:focus,
.effect-demo:hover {
    outline: 0;
    color: #f48120;
    transition: color 1s ease;
    cursor: pointer
}



span:focus:after,
span:focus:before,
span:hover:after,
span:hover:before {
    outline: 0;
    background-color: #f48120;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s
}