html - 的事件类无法在重复的 元素中获取

Question

这段代码有什么问题？单击事件选项卡后我无法执行。

.sample-4.sample li:nth-child(1) a.nav-link.active ~ li:last-child:after{transform:translateX(-290%)}
 .sample-4.sample li:nth-child(2) a.nav-link.active ~ li:last-child:after{transform:translateX(-104%)}
 .sample-4.sample li:nth-child(3) a.nav-link.active ~ li:last-child:after{transform:translateX(-90%)}
 .sample-4.sample li:nth-child(4) a.nav-link.active ~ li:last-child:after{transform:translateX(0%)}

.sample .nav.nav-tabs li:last- 
 child:after {
   content:'';width:100%;height:3px;background- 
   color:green;display:block;
   bottom:-4px;
   transform:translateX(0);
   transition:all .5s linear
 }

如果我像下面这样使用，代码工作正常。

 .sample-4.sample li:nth-child(1) ~ li:last-child:after{transform:translateX(-290%)}
 .sample-4.sample li:nth-child(2) ~ li:last-child:after{transform:translateX(-104%)}
 .sample-4.sample li:nth-child(3) ~ li:last-child:after{transform:translateX(-90%)}
 .sample-4.sample li:nth-child(4) ~ li:last-child:after{transform:translateX(0%)}

Answer 1

您正试图在没有内容的情况下使用伪类 after。您必须具有 content 才能将 before 或 after 呈现给 DOM。示例:

li:last-child:after{
  content: "";
  width: 100px;
  height: 120px;
  display: block;
  transform:translateX(-290%);
}

此外，不要忘记将显示更改为block 或inline-block。这样你的尺寸(width、height、margin 和 padding)就会生效。