Why are my pseudo-classes overriding display:none? - css

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