Изменить цвет псевдоэлемента в выбранном состоянии

Question

Я хочу изменить цвет стрелки, а также кружок при нажатии на нее. Я использую LESS и получаю правильное место для добавления border-top-color: #0066ff; Может кто-нибудь предложить, пожалуйста? Вот код:

МИНУС:

.circle {
    border-radius: 50%;
    box-sizing: border-box;
    width: 225px;
    height:225px;
    border: 6px solid #ff6600;
    border-radius: 50%;
    position: relative;
    cursor:pointer;
    &.selected {
        border: 6px solid #0066ff;
    }
    &:after {
        top: 104%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(136, 183, 213, 0);
        border-top-color: #ff6600;
        border-width: 10px;
        margin-left: -10px;
        transform: scaleY(1.6);
        &.selected {
            border-top-color: #0066ff;
        }
    }
}

HTML:

<div class="circle"></div>

JS:

$(document).ready(function(){
    $('.circle').on('click', function(){
        $(this).addClass('selected');
    });
});

JS скрипка здесь:

https://jsfiddle.net/kunjsharma/6eu431hp/1/

Answer 1

Вам нужно поместить :after внутрь .selected: посмотреть эту скрипку

.circle {
    border-radius: 50%;
    box-sizing: border-box;
    width: 225px;
    height:225px;
    border: 6px solid #ff6600;
    border-radius: 50%;
    position: relative;
    cursor:pointer;
    &.selected {
        border: 6px solid #0066ff;
        &:after { // <-- moved this inside .selected
            border-top-color: #0066ff;
        }
    }
    // rest of the styles...
}