Html 活动类<；a>；无法获取内部重复信息<；李>；要素

这个代码有什么问题？我无法在单击活动选项卡时执行

.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%)}

---

您试图在之后使用

伪类

，而不使用
内容
。您必须具有
内容
，才能将
之前
或之后的
渲染到DOM。
例如：

另外，不要忘记将显示更改为
块
或
内联块
。这样，您的维度（
width
、
height
、
margin
和
padding
）将生效。
li:last child:after{content:；width:100px；height:120px；display:block；transform:translateX（-290%）；}我已经声明了这个类。但问题是，我想在不同的标签之间移动点击活动标签的内容。谢谢
li:last-child:after{
  content: "";
  width: 100px;
  height: 120px;
  display: block;
  transform:translateX(-290%);
}