要素よりも早く擬似クラスを読み込む方法は？

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> 

と、これは今、私はそれがドロップダウン・メニューのスライドの後に疑似クラスのロードで生成されたアップ矢印を滑り落ちるとき

問題があるUI のこの種を持っている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

次の代わりに使用してください：後に