如何使伪类加载早于元素？

Question

我正在设计一些UI元素。现在在下拉菜单中我有以下HTML代码。

<div class="dropdown ">


    <div class="dropdown-toggle mytextformcontrol" data-toggle="dropdown">
        <a href="#" class="indigo pull-left">Dropdown</a>
        <div class="pull-right roundcontainer">
            <div class="round1"></div>
            <div class="round2"></div>
            <div class="round3"></div>
            <div class="round4"></div>
        </div>  

    </div>

    <ul class="dropdown-menu">

        <li><a href="#" class="effectbtn" >Messages</a> </li>
        <li><a href="#" class="effectbtn">Events</a> </li>
        <li><a href="#" class="effectbtn">Settings</a> </li>

    </ul>

</div> 

这是css方

.dropdown-toggle.mytextformcontrol {
    width: 100%;
    cursor: pointer;
    overflow: auto;
}

.roundcontainer {
    position: absolute;
    height: 100%;
    width: 50px;
    right: 0px;
    top: 0px;
    background-color: #505ce5;
    overflow: hidden;
}


.round1,.round2,.round3,.round4 {
    position: absolute;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    background-color: rgba(255,255,255,0.65);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.roundcontainer:hover .round1 {
    transform: scale(0.5);
}

.dropdown-menu {
    width: 100%;
    box-shadow: none;
    top: 125%;
    font-size: 18px;
    padding: 0px;
    border: none;
    background-color: #505ce5;
    border-radius: 0px;

}

.dropdown-menu:after {
    content: "";
    position: absolute;
    right: 40px;
    top: -20px;
    border-width: 10px;
    border-color:  transparent transparent #505ce5 transparent;
    border-style: solid;

}

.dropdown-menu li a {
    color: #fff;
    border-bottom: 1px solid #fff;
    padding: 20px;
    transition: all 0.2s;
}

.dropdown-menu li:last-child a{
    border-bottom: none;
}

.dropdown-menu li a:hover {
    color: #505ce5;
    background-color: transparent;
    z-index: 1;
}
.dropdown-menu li a.effectbtn:hover:before {
    z-index: -1;
}

现在我有了这种用户界面

问题是当下拉菜单向下滑动时，它向下滑动使用伪类加载生成的向上箭头。如何在下拉菜单滑动之前加载它？

Answer 1

尝试使用：before而不是：after