Как изменить стиль псевдоэлемента при наведении на него курсора?

Крайне простая штука, которую никак не могу реализовать. Необходимо изменить цвет стрелки в слайдере (которая реализована как псевдоэлемент) при наведении на нее курсора. Я делала так:

   .announcements:hover:before { 
    border-color:#474747;
}

Это работает, но цвет стрелки меняется не только при наведении на нее, но и при наведении на сам слайдер (annoucements), а этого я бы хотела избежать.

Подскажите, как реализовать данную задачу при помощи css или js?

html-верстка слайдера

<div class="poster">
<div class="announcements">
    <div class="announcements-item">
        <div class="announcements_date">26-27 <span>october</span> 2022</div>
        <div class="announcements_block">
            <div class="announcements_title">Wealth TOP FORUM Israel 2022</div>
            <div class="announcements_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            <div class="announcements_location">Barcelona</div>
        </div>
    </div>
</div>