JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<ul class="nav">
    <li>
        <a href="#" class="nav-item">Connect &amp; This Is Long</a>
        <ul>
            <li><div class="subBar"></div></li>
        </ul>
    </li>
    
    <li>
        <a href="#" class="nav-item">This is short</a>
        <ul>
            <li><div class="subBar"></div></li>
        </ul>
    </li>
</ul>

CSS

a { padding: 6px 12px; display: inline-block; background: #ccc;}

.subBar { width: 60px; height: 1em; background: green; }

ul { margin: 0; padding: 0; list-style: none; }

ul li { margin-bottom: 20px; }

JavaScript

$(".subBar").each(function() {
    var parentWidth = $(this).closest("ul").parent("li").find("a").outerWidth();
    
    $(this).css({ "margin-left" : parentWidth/2 -30 });
});