Edit in JSFiddle

@-webkit-keyframes move-right {
    100% { -webkit-transform: translate(0.5em, 0); }
}
@-moz-keyframes move-right {
    100% { -moz-transform: translate(0.5em, 0); }
}
@keyframes move-right {
    100% { transform: translate(0.5em, 0); }
}
.cursor-pointer {
    cursor: pointer;
}
.text-center {
    text-align: center;
}
div.display-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
div.display-flex > div {
    margin: 0 10px 0 10px;
}
ul.reset-style {
    list-style: none;
}
ul.custom-style-base li:before {
    position: absolute;
    margin-left: -1.5em;
    padding-right: 1em;
    color: rgba(255,0,0,1);
    content: '\25CF';
}
ul.custom-style-hover-color li:hover:before {
    color: rgba(255,0,0,0.5);
}
ul.custom-style-hover-type-arrow li:hover:before {
    content: '\21D2';
}
ul.custom-style-hover-animate li:hover:before {
    -webkit-animation: move-right 0.5s 0s 1 ease forwards;
    -moz-animation: move-right 0.5s 0s 1 ease forwards;
    animation: move-right 0.5s 0s 1 ease forwards;
}