How can I make a jsf commandLink look disabled? - css

Question

I have a h:commandLink and I want it to look like is not clickable (i.e the link has a pale color and when you hover over it the cursor becomes not-allowed ).
I'm using the disabled attribute trying to achieve that but it doesn't perform the desired effect: the link doesn't have a pale color and when I hover over it the cursor doesn't become not-allowed. But when I click the commandLink it doesn't do anything, which is good but I'd prefer for it to have the properties previously defined.
Here's my code:
<h:commandLink onclick="function()" href="#{request.contextPath}/create"
styleClass="#{condition ? 'enabled-link' : 'disabled-link'} mar-left-8 cl-blue"
disabled="#{condition ? 'false' : 'true'}"
data-scroll-goto="0" id="show"><i class="fa fa-plus-circle" aria-hidden="true"/>
<p:ajax/>
</h:commandLink>

Answer 1

Apparently the disabled attribute of the commandLink turns the link into a span tag instead of an anchor tag.
So my code displays on the browser in the following fashion:
<span href="/" id="show"
name="show"
class="disabled-link mar-left-8 cl-blue">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</span>
And the reason why the disabled-link class wasn't making any effect is because I was missing this peace of code on the css:
span.disabled-link {
cursor: not-allowed;
opacity: 0.5; }