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

我想改变箭头的颜色，以及点击时的圆圈。我使用更少的颜色，并在正确的位置添加

边框顶部颜色：#0066ff
减：

HTML:

JS fiddle在这里：

您需要将
：放在
内部的
之后。选中的
：

.circle{
边界半径：50%；
框大小：边框框；
宽度：225px；
身高：225px；
边框：6px实心#ff6600；
边界半径：50%；
位置：相对位置；
光标：指针；
&.选定{
边框：6px实心#0066ff；
&：在{//Hi@Hooman之后，谢谢你的回复。我已经编辑了我的cdn路径。@jnuK:我很快就回复了…我已经用你想要的小提琴更新了答案…太好了，谢谢！同时，我找到了另一个解决方案：
&.selected:after{border top color:#0066ff；}
inside
.circle
@jnuK-很酷，尽管这个解决方案与我的答案相同！；-）
.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;
        }
    }
}

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

$(document).ready(function(){
    $('.circle').on('click', function(){
        $(this).addClass('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...
}