How do I combine pseudo-elements with pseudo-classes?

Question

How do I combine pseudo-elements like :after with pseudo-classes like :hover and :not?

li {
  margin-bottom: 10px;
}
li:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #009688;
  transition: width .8s;
}
li:hover:after {
  width: 100%;
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>forth</li>
  <li>fifth</li>
</ul>

How can I exclude, for example, the first and third items in the list from this hover effect?

Answer 1

You can chain :not() pseudo-class with :nth-child() selector like this.

li {
  margin-bottom: 10px;
}
li:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #009688;
  transition: width .8s;
}
li:not(:nth-child(1)):not(:nth-child(3)):hover:after {
  width: 100%;
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>forth</li>
  <li>fifth</li>
</ul>