CSS - using line transition animation on ::before

Question

&::after,
&::before {
  background: ${mainColor};
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transition: all 0.7s ease-in-out;
}