选择器之前和之后的行为不正常

Question

我有以下CSS：

#clickto {
    color: white;
    text-shadow: 2px 2px 2px Darkblue;
}

#verdescheading:hover {
    border-bottom: 1px solid;
}


    #verdescheading :before {
        content: " >";
    }

    #verdescheading :after {
        content: " <";
    }

    #verdescheading .clicked:before {
        content: "< ";
    }

    #verdescheading .clicked:after {
        content: "> ";
    }

和以下html（此文本直接从firebug剪切并粘贴，因此可能是准确的）：

<h1 id="verdescheading" class="">
Important notice
<span id="clickto">(Click to expand)</span>
</h1>

单击事件的标题部分时，将'verdescheading'的类设置为'clicked'。 Firebug显示一切都已设置为应有的状态。但是，我在页面上的seeing有点不同。

首先，按照样式表设置的>和

另一件事是符号不会改变，即，始终是：before和：after而不是.clicked：before和.clicked：after的规则。

Answer 1

由于元堆栈溢出中讨论的原因而更新答案。这里的审核非常糟糕。