JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <a href="#">
        <span class="traco"></span>
        <span class="link">HOME</span>
    </a>
    <a href="#">
        <span class="traco"></span>
        <span class="link">CONTATO</span>
    </a>
</div>

CSS

#menu a {
   display:block;
   position:relative;
   float:left;
   overflow:auto;
   text-decoration:none;
   color: #422;
   background-color: #422;
}

#menu a span.link {
   position:relative;
   display:block;
   margin: 0 20px;
   padding: 0 4px;
   z-index: 10;
   color: #ffe;
   background-color: #422;
}

#menu a span.traco {
   display:block;
   position:absolute;
   width:100%;
   height: 50%;
   z-index: 5;
   border-bottom: 1px solid #422;
}

#menu a:hover span.traco {
   border-color: #ffe;
}