The color is changed above ‘::before’

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before{
  right: 0;
  border-width: .4rem .4rem .4rem 0;
  border-right-color: red;
}

Teach you a way to review elements.

I am using a tooltip with data-placement right:

<i
    class="fas fa-question-circle text-blue"
    data-toggle="tooltip"
    data-placement="right"
    title="hello"
></i>

I am trying to change the tooltip arrow color like so:

.tooltip.left .tooltip-arrow {
  border-left-color: red !important;
}

But nothing happens unfortunately, what am I doing wrong here?