You miss before :) try this:

.testimonial-carousel .carousel-control:hover::before {
    color: red !important;
}

.testimonial-carousel .carousel-control:hover::after {
    color: red !important;
}

Thanks, that worked! Though after hovering it still turns black. I tried:

.testimonial-carousel .carousel-control::hover {
    color: red!important;
}

.testimonial-carousel .carousel-control::after {
    color: red!important;
}

But that doesn't seem to work for some reason?

Have you tried to overwrite their color in css?

.testimonial-carousel .carousel-control::before {
    color: black;
}

And don't forget about opacity:

.testimonial-carousel .carousel-control {
  opacity: unset;
}