CSS: How to affect :after Pseudo Element if Last-Child <li> gets hovered?

Question

Challenge:

• A pseudo element called li:last-child:after should get affected when hovering <li> elements of a list
• The pseudo element should get affected depending on which <li> is getting :hovered

Example:

• Hovering li:nth-child(1) should move the pseudo element 100px to the right,
• Hovering li:nth-child(2) should move the pseudo element 200 px to the right, etc.

Coding:

For <li> items from 1 to 3 I got this work successfully, but unfortunately not for the last child. Where is my issue?

ul {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

a {
  display: block;
  width: 100px; height: 50px;
  color: white;
  background-color: orange;
}

/*Creating the pseudo element */
li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 100px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

/*Creating the desired action for li childs 1 to 3*/
li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);}
li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);}
li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);}

/*Failed experiments about creating the desired action for li last child*/
li:nth-child(4):hover + li:last-child:after { transform: translatex(400px);}
li:nth-child(4):hover ~ li:last-child:after { transform: translatex(400px);}
li:nth-child(4):hover > li:last-child:after { transform: translatex(400px);}
li:nth-child(4):hover li:last-child:after { transform: translatex(400px);}

<div>
   <ul>
      <li><a href="#">Test 1</a></li>
      <li><a href="#">Test 2</a></li>
      <li><a href="#">Test 3</a></li>
      <li><a href="#">Test 4</a></li>
   </ul>
</div>

Answer 1

li:nth-child(4):hover is already saying

li, which is the 4th element, which is being hovered

so li:nth-child(4):hover + li:last-child:after is looking for a 5th li sibling that immediately follows the 4th element and is also the last child.

li:nth-child(4):hover ~ li:last-child:after is looking for a 5th li sibling that is somewhere after the 4th element and is also the last child.

li:nth-child(4):hover > li:last-child:after is looking for an li that is a child of the 4th li and is also a last child.

and li:nth-child(4):hover li:last-child:after is looking for an li that is a descendant of the 4th li and is also a last child.

depending on what you're looking for you can either use:

li:nth-child(4):hover:after { transform: translatex(400px);}

li:last-child:hover:after { transform: translatex(400px);}

or li:nth-child(4):hover:last-child:after { transform: translatex(400px);} if you want to be consistent with the other ones.

ul {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

a {
  display: block;
  width: 100px; height: 50px;
  color: white;
  background-color: orange;
}

/*Creating the pseudo element */
li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 100px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

/*Creating the desired action for li childs 1 to 3*/
li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);}
li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);}
li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);}


li:nth-child(4):hover:last-child:after { transform: translatex(400px);}

<div>
   <ul>
      <li><a href="#">Test 1</a></li>
      <li><a href="#">Test 2</a></li>
      <li><a href="#">Test 3</a></li>
      <li><a href="#">Test 4</a></li>
   </ul>
</div>

Answer 2

For the last child, a different approach was necessary:

li:last-child:hover:after { transform: translatex(400px);}