Question

what is wrong with this code? I am unable to execute upon click of active tabs.

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

If I am using like below Code is working fine.

 .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

您正在尝试使用pseudo-class after，而不content。你必须有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）就会生效。

<a> unable to fetch inside repeated </a> <li> <a> element

1 个答案: