JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<ul>
    <li>
        <a href="#" title="Home">home</a>
    </li>
    <li>
        <a href="#" title="Home2">home 2</a>
    </li>
</ul>

CSS

ul > li > a{
    width: 300px;
    display: block;
    background-color : #ccc;
    text-align: center;
}

ul > li > a:hover::after{    
    content : '------';
    float: right;
    padding-right: 10%;
    letter-spacing: -0.5em;
}

ul > li > a:hover::before{    
    content : '------';
    float: left;
    padding-left: 10%;
    letter-spacing: -0.5em;
}