JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Program Rules</li>
    <li>Contact Us</li>
</ul>

CSS

ul { margin: 0 auto; width: 540px; }

li {
    float: left;
    width: 120px;
    text-align: center;
    border: 1px solid #000;
    position: relative;
    height: 20px;
}

li:hover:after {
    content: "";
    width:10px;
    height: 20px;
    background-color: #CCC;
    display: block;
    position: absolute;
    top: 0;
    right: -10px;
    z-index: 10;
}

li:hover:before {
    content: "";
    width:10px;
    height: 20px;
    background-color: #CCC;
    display: block;
    position: absolute;
    top: 0;
    left: -10px;
    z-index: 10;
}
li.active:before {
    content: "";
    width:10px;
    height: 20px;
    background-color: #CCC;
    display: block;
    position: absolute;
    top: 0;
    left: -10px;
    z-index: 10;
}

li.active:after {
    content: "";
    width:10px;
    height: 20px;
    background-color: #CCC;
    display: block;
    position: absolute;
    top: 0;
    right: -10px;
    z-index: 10;
}