Position a pseudo :after element to the right of a list item

Question

I am trying to position a pseudo :after element 30 pixels to the right of a menu list item.

No matter the length of the text of the item I want the element to be 30px to the right.

I have stripped the following code to the bare minimum that I think is required for this issue.

Note that this is a mobile menu. The menu and the a tag link extends the full width of the browser (phone).

#menu-main-menu-1 li {
  position: relative;
  list-style: none;
}
#menu-main-menu-1 li a {
  padding: 18px 0;
  display: block;
  text-align: center;
}
#menu-main-menu-1 a:after {
  content: "\25CF";
  position: absolute;
  right: 0;
  left: 150px;
  top: 20px;
}

<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>

The above code produces the following result:

As you can see, I need to position it to the left 150px to get the element to go 30px to the right of the item. It works, but I can foresee an issue where if the menu item has a lot of text, it will surpass the 150px and the element will be in the text. For example:

I need the element to be 30px to the right of the text no matter the length. So it would look like:

Here is the JSFiddle link: JSFiddle

Please note that I have stripped many of the unnecessary styles that do not affect the functionality of this question (color, fonts, etc.)

Any help would be much appreciated!

Thanks

Answer 1

#menu-main-menu-1 li {
    list-style: none;
}
.menu-item {
    display: flex;             /* 1 */
    justify-content: center;   /* 2 */
}
.menu-item a {
    margin: 0 30px;            /* 3 */
    padding: 18px 0;
}
.menu-item::after {
    content: "\25CF";
    align-self: center;        /* 4 */
}
.menu-item::before {
    content: "\25CF";          /* 5 */
    visibility: hidden;
}

<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>

Notes:

1. Establish flex container (block-level; takes full width)
2. Horizontally center child elements.
3. Anchors/menu items have 30px horizontal margins
4. Right-side pseudo-element is vertically-centered and always 30px to the right of menu item (regardless of text length).
5. A second pseudo-element is added on the left for equal balance. This keeps the menu items centered in the container. It's concealed with visibility: hidden. (more info)