Geek Answers Handbook

Place pseudo: after the item to the right of the list item

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

Regardless of the text length of the element, I want the element to be 30 pixels to the right.

I split the following code into the minimum minimum that I think is needed for this problem.

Please note that this is a mobile menu. Menu and a tag extends the 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 gives the following result:

enter image description here

As you can see, I need to put it 150 pixels to the left to get the element, which should go 30 pixels to the right of the element. It works, but I can anticipate the problem, if the menu item has a lot of text, it will exceed 150 pixels and the element will be in the text. For instance:

enter image description here

I need the element to be 30px to the right of the text, regardless of length. So it will look like this:

enter image description here

Here is the JSFiddle link: JSFiddle

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

Any help would be greatly appreciated!

thanks

+5
source share
2 answers
 #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, not a block, that is, the block should wrap the text, and then change the :after element to 30px to the right.

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

+3
source 

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

  • Install a flexible container (block level, full width)
  • Elements of a child with a horizontal center .
  • Anchors / menu items have 30px horizontal margins
  • The pseudo-element on the right is vertically centered and always 30px to the right of the menu item (regardless of the length of the text).
  • A second pseudo-element is added on the left for equal balance. This holds the menu items in the center of the container. It is hidden using visibility: hidden . ( more details )
+5
source

More articles:


All Articles