通过JSF将：active css应用于活动链接

Question

我正在尝试更改活动菜单边框底部颜色，但菜单处于活动状态时底部颜色应该会更改。

这是我的JSF代码：

<h:head>    
    <link rel="stylesheet" type="text/css"  href="#{request.contextPath}/resources/css/cir.css" />
</h:head>
<h:body>
    <h:form prependId="false">
        <div id="styleHead">
            <h:commandLink value="Home" action="disclaimer.xhtml" />
            <h:commandLink value="About" action="aboutCir.xhtml" />
            <h:commandLink value="Legal" action="legal.xhtml" />
        </div>
    </h:form>
</h:body>

以下是我的CSS：

#styleHead a {
    border-bottom-color:#497693;
}
#styleHead a:hover {
    border-bottom-color:#F7A824 ;
}
#styleHead a:active {
    border-bottom-color:red ;
}

页面重定向到其他页面后，

CSS a:active消失。我尝试使用JavaScript来应用CSS，但这会使页面重新加载后消失。

我尝试在命令链接中使用<f:param>，但这也是徒劳的。

有没有办法通过jsf或托管bean将活动css应用到活动链接？