JSFiddle - React, Tailwind, and code Playground

by Edbert

HTML

<nav>
    <a href="#">
        My Cats
    </a>
    <a href="#">
        My Dogs
    </a>
    <a href="#">
        My Pets
    </a>
</nav>

CSS

body {
    background: blue;
}
nav {
    width: 100%;
    height: 50px;
    margin: 20px 0 0;
    background: #919924;
}
a {
    padding: 0 10px;
    display: inline-block;
    line-height: 50px;
    position: relative;
}
a:after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: -1;
}
a:hover:after {
    background: -webkit-linear-gradient(red, transparent);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, transparent);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, transparent);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, transparent);
    /* Standard syntax */
}