CSS：如果 Last-Child <li> 悬停，如何影响 :after 伪元素？

Question

挑战：

一个名为 li:last-child:after 的伪元素应该在悬停列表的 <li> 个元素时受到影响
伪元素应该受到影响，具体取决于哪个 <li> 正在获得 :hovered

示例：

悬停 li:nth-child(1) 应该将伪元素 100px 向右移动，
悬停 li:nth-child(2) 应该将伪元素 200 px 向右移动，等等

编码：

对于从 1 到 3 的 <li> 个项目，我成功完成了这项工作，但不幸的是，最后一个 child 没有。我的问题在哪里？

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

对于最后一个 child，需要采用不同的方法：

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

Answer 2

li:nth-child(4):hover 已经在说

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

所以 li:nth-child(4):hover + li:last-child:after 正在寻找第 5 个 li 兄弟，它紧跟在第 4 个元素之后，也是最后一个 child。

li:nth-child(4):hover ~ li:last-child:after 正在寻找第 5 个 li 兄弟元素，它位于第 4 个元素之后，也是最后一个 child.

li:nth-child(4):hover > li:last-child:after 正在寻找第 4 个 li 的 child 并且也是最后一个 child.[=27= 的 li ]

和 li:nth-child(4):hover li:last-child:after 正在寻找一个 li，它是第 4 个 li 的后代，也是最后一个 child.

根据您要查找的内容，您可以使用：

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

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

或li:nth-child(4):hover:last-child:after { transform: translatex(400px);}如果你想与其他的保持一致。

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>

CSS：如果 Last-Child <li> 悬停，如何影响 :after 伪元素？

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

html

css

css-selectors

pseudo-element

flexbox