JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<ul class="subpages">
    <li class="page_item page-item-144">
        <a class="textshadow" href="#"><span class="firstWord">Child</span>page1</a>
    </li>
    <li class="page_item page-item-145">
        <a class="fallback" href="#"><span class="firstWord">Child</span>page2</a>
    </li>
</ul>

CSS

body { background: #EE3124; font-family: 'Gill Sans',sans-serif }

ul { margin: 5em; }

a:link, a:visited { text-decoration: none; color: #FFF; text-transform: uppercase; }
a:link .firstWord, a:visited .firstWord { color: #6F1200; overflow: visible; }

.textshadow:hover, .textshadow:active { text-shadow: 0 0 5px #FFF; }
.fallback:hover, .fallback:active { background: url(http://www.lineberrydesign.com/projects/xcentric/radialgradient.png) repeat center center; }