JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul class="topoMenu">
    <li> <a href="/empresas">empresa</a>

        <div class="topoMenuBarra"></div>
    </li>
</ul>

CSS

.topoMenu li {
    font: 300 20px/20px'Ubuntu', sans-serif;
    color: #fff;
    float: left;
}
.topoMenu li img {
    margin-right: 95px;
    margin-top: 44px
}
.topoMenu li a {
    margin-top: 62px;
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}
.topoMenuBarra {
    height: 2px;
    background-color: #ced1d7;
    display: none;
}

JavaScript

$(document).ready(function () {

    $(".topoMenu li a").hover(function () {
        var $this = $(this);
        var largura = $this.width();
        $this.next('.topoMenuBarra').css({
            'display': 'block',
                'width': largura + 'px'
        });
    },

    function () {
        $(this).next('.topoMenuBarra').css('display', 'none'); /*fazer barra desaparecer*/
    });

});