Why are my pseudo-classes overriding display:none?

Question

I have a div that appears as an "X" (used to close a window):

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

The following are the CSS properties of this element:

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

This div should not be displayed until another element is clicked, at which point, it should appear, as defined by the following code:

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

When the page loads, however, the div "x" is visible, before .ActiveQuestionCycler is clicked. (The display is not set to none.) I think this has to do with the pseudo-classes before and after overriding this but I can't figure out why.

(div.obj DOES fade in when .ActiveQuestionCycler is clicked.)

There are no error alerts in the source.

Answer 1

This comment /// STYLE SETTINGS FOR THE QUESTION CONTAINER AND CLOSE "X" BUTTON on line 109 is invalid. Change it to:

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

and it should work. Remember to drop that display: none; into the .x

So it will look like:

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

While // comment is normal for most programming languages, regular css does not accept it and css comments go like this /* comment */