Untitled

dabblet.css

body { background: #000; } 
ul li a { text-decoration: none; color: #fff; font-size: 2rem; font-family: Avenir, sans-serif; text-transform: uppercase; }
ul li a:after, ul li a:before { opacity: 0; font-size: 1.5rem; position: relative; top: -.25rem; color: #f00; z-index: -2; } 
ul li a:before { content: "<"; right: -2rem; } 
ul li a:after { content: ">"; left: -2rem; }
ul li a:hover:before, ul li a:hover:after { opacity: 1; transition: .7s all linear; } 
ul li a:hover:before { right: 0; } 
ul li a:hover:after { left: 0; } 

dabblet.html

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}