.c-drawnLine {
  padding-bottom: 4px;
  position: relative;
}

.c-drawnLine::after {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.c-drawnLine:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

.c-drawnLine span {
  color: #fff;
}

.c {
  &-drawnLine {
    padding-bottom: 4px;
    position: relative;

    &::after {
      content: "";
      width: 100%;
      height: 1px;
      display: block;
      background-color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      transform-origin: right;
      transform: scaleX(0);
      transition: transform 0.3s;
    }

    &:hover {
      &::after {
        transform-origin: left;
        transform: scaleX(1);
      }
    }

    span {
      color: #fff;
    }
  }
}