在选定状态下更改伪元素颜色

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内：see this fiddle

.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...
}