cup_of cup_of - 2 months ago 15
CSS Question

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

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:

enter image description here

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:

enter image description here

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

enter image description here

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