JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-main-menu-1">
     <li class="menu-item">
        <a href="#">Menu Item</a>
     </li>
     <li class="menu-item">
        <a href="#">Long Menu Item Text</a>
     </li>
</ul>

CSS

#menu-main-menu-1 li {
        position: relative;
        list-style: none;
    }

    #menu-main-menu-1 li a {
        padding: 18px 0;
        display: inline-block;
        text-align: center;
    }
    
    #menu-main-menu-1 a:after {
        content: "\25CF";
        padding-left: 30px;
    }