Активный класс <a>не может получить внутри повторяющегося элемента <li>

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

Вы пытаетесь использовать 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) вступят в силу.