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

Comeon

Answer 1

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

    // Recommended to recenter text
    width: 100%; 
    margin: 0 auto; 
}

#menu-main-menu-1 a:after {
    content: "\25CF";
    padding-left: 30px;
}

I changed #menu-main-menu-1 li a to an inline-block rather than a block, meaning the block should wrap the text, then changed the :after element to pad by 30px to the right.

Is that what you want? https://jsfiddle.net/tvfudkgt/1/

Inclined

yes very close! your code lead me to the answer i was looking for. the only issue was, changing it to inline block pushed it the text over to the left instead of centered. I was able to do some css to center it and your padding left idea worked perfectly. thanks. add this to #main-menu-1 li a and I will accept your answer! width: 100%; margin: 0 auto; – Comeon

Answer 2

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

Coincidentally

thank you sir for your well written answer. This seems to work perfectly but dave answered just a little before you and his answer was a little simpler and worked as well. I gave him the accepted answer so I cannot give you the accepted answer. I did give you an upvote though. Thanks again for your work – Comeon