Using ::after parent of closed list item

I am trying to append using ::after my nested ul class e.g if the li has children, it should have a image infront of it (which i will animate later). My content isn’t working, as i want to test my ::after tag. Am i missing something? here is my codepen

you could just add a span element in the li…like

<li><a href="#">About Us<span id="after-aboutus" class=aftr">[img here]</span></a></li>

If I understand you correctly, you are trying to add an indicator that there’s sub level to that item. Maybe this article will be helpful: Using CSS3 Selectors To Label Items With Submenus In A Navigation Bar.

and my CodePen:slight_smile:

1 Like

@dresden_phoenix works perfect! thanks! But can you explain what is going on here

 li a:first-child:nth-last-child(2):after

Is it possible for the same css property can be used in jquery?

::after (and ::before) isn’t part of the DOM, so no.

1 Like

Nofel, it just a ‘thinking trick’, if you will. Essentially you are applying a CSS technique that figures out how many siblings and element has. If it has a specific number. in my example I check for the LI having 2 elements( tho it can be adjusted to any number ) as all LI with sub-menu will have at lest 2 elements ( the TEXT/LINK and the UL for the sub menu)

  1. li a:first-child ( do you have a A tag inside your LI that so happens to be the first tag inside that LI?)
  2. nth-last-child(2) if so, does the LI contain at least 2 elements? ( see, if you have a link and an UL for the sub menu, this condition will, of course, be necessarily true).
  3. 1 & 2 combine… the A tag must be THE FIRST CHILD and at the same SECOND TO LAST TAG ? This condition is only true when you have exactly two elements, and the first is an A tag.
  4. :after this is the generated element ( your graphic, or whatever you want your indicator to be)

hope that makes the technique easier to understand

As for jQuery, since you have full control of the DOM, you could APPEND a SPAN.after and style that. But that seems like a lot of extra work when you consider that you can do it with pure CSS.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.