JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

ul > li > a {
    display: inline-block;
    background-color: #ccc;
    text-align: center;
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
}

    ul > li > a:hover::after {
        content: "";
        display: inline-block;
        border-top: solid 1px black;
        width: 50px;
        height: 1px;
        top: 50%;
        position: absolute;
        right: 1px;
    }

    ul > li > a:hover::before {
        content: "";
        display: inline-block;
        border-top: solid 1px black;
        width: 50px;
        height: 1px;
        top: 50%;
        position: absolute;
        left: -1px;
    }