JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<ul>
  <li><a href="#" title="Home">Home</a></li>
  <li><a href="#" title="Services">Services</a></li>
  <li><a href="#" title="Portfolio">Portfolio</a></li>
  <li><a href="#" title="Resources">Resources</a></li>
  <li><a href="#" title="Contact">Contact</a></li>
</ul>

CSS

ul, li { margin:0; padding:0; list-style:none; font-family:"lucida sans unicode"; text-transform:uppercase; background:#f00; } 
ul li a { position:relative; display:block; width:7em; padding:0 .25em 0 0; text-align:right; text-decoration:none; background:#fff; color:#999; z-index:1;  } 
ul li a:after { content:attr(title); position:absolute; z-index:0; left:7.25em; padding:0 .25em; color:#ff2525; transform:scaleX(-1); pointer-events:none; }
ul li a:hover { color:#000; }
ul li a:hover:after { color:#f44; }

JavaScript

// attempt at creating basic navigation effect of http://ryanfait.com/ using just HTML & CSS3