私の疑似クラスオーバーライドはなぜですか？

Question

私は（ウィンドウを閉じるために使用される）、「X」として表示されますdiv要素があります。

<div class="alertwrapper" style="display:inline-block;"> 
<div class="obj"></div> 
<div class="x"></div> //<-----ELEMENT IN QUESTION 
</div> 

次は、この要素のCSSプロパティです：

.x { 
    display: none !important; 
    position: absolute !important; 
left:0; 
top:0; 
    transition: transform .25s ease-in-out; 
    z-index:999; 
} 

.x:before { 
    content: ""; 
    position: absolute; 
    //Here, I've also tried display:none !important; 
    left: 48%; 
    margin-left:-495px; 
    right: 0; 
    top: 115px; 
    bottom: 0; 
    width: 32px; 
    height: 0; 
    border-top: 3px solid black; 
    transform: rotate(45deg); 
    transform-origin: center; 
    z-index:999; 
} 
.x:after { 
    content: ""; 
    position: absolute; 
    //Here, I've also tried display:none !important; 
    left: 48%; 
    margin-left:-495px; 
    right: 0; 
    top: 115px; 
    bottom: 0; 
    width: 32px; 
    height: 0; 
    border-top: 3px solid black; 
    transform: rotate(-45deg); 
    transform-origin: center; 
    z-index:999; 
} 

このdiv要素はすべきではありません別の要素は、その時点で、それが表示され、クリックされるまで、次のコードによって定義されるように、表示される：

<script type="text/javascript"> 
$(document).ready(function() { 
$('body').on('click', '.ActiveQuestionCycler', function() { 
      $("div.x").fadeIn(300).delay(1500); 
      $("div.obj").fadeIn(300).delay(1500); 
    }); 
}); 
</script> 

ページの負荷が、しかし、DIV「X」表示され、 .ActiveQuestionCyclerをクリックする前に（ディスプレイはnoneに設定されていません）。これは疑似クラスbeforeとafterをオーバーライドする必要があると思いますが、その理由を理解できません。

（.ActiveQuestionCyclerをクリックしたときにdiv.objがフェードインん。）

ソースには、エラーアラートはありません。

Answer 1

このコメント/// STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON on line 109は無効です。それを変更します。

/* STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON */

、それが動作するはずです。 // commentは、ほとんどのプログラミング言語のために正常です

.x { 
    display: none; 
    /* your other styles */ 
} 

ますが、通常のCSSはそれを受け入れず、CSSのコメントはこの/* comment */