JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav-menu-list">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ul>

CSS

ul {
    list-style-type: none;
}

.nav-menu-list>li>a {
    font-family: 'Pribambas', Helvetica, Roboto, Arial, sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: normal;
}

ul.nav-menu-list li a {
    border-bottom: none;
    padding-left: 60px;
    color: #000;
}

ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 3px;
    background-color: #000;
    clear: both;
    margin-bottom:6px;
}

ul.nav-menu-list li a:hover, ul.nav-menu-list li a:focus {
    background-color: transparent;
    color: #a2a2a2;
}