How to disable a link using CSS?

Question

I have the following link in a wordpress page.

This class is a link. Is it possible to disable the link using only CSS?

<a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="material-icons select-slot__serviceStaffOrLocationIcon___3WFzp">timelapse</i><span class="select-slot__serviceName___14MHL">Employee Assistance Line</span></a>

Answer 1

You could do something like this:

.select-slot__serviceStaffOrLocationButton___5GUjl {
  pointer-events: none;
  color: black; (the color which is your normal text maybe?)
}

Answer 2

Use pointer-event:none;.

.select-slot__serviceStaffOrLocationButton___5GUjl{
  pointer-event:none;
}

<a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="material-icons select-slot__serviceStaffOrLocationIcon___3WFzp">timelapse</i><span class="select-slot__serviceName___14MHL">Employee Assistance Line</span></a>

Answer 3

.select-slot__serviceStaffOrLocationButton___5GUjl
{
pointer-events: none; 
}

Add this to css.

If you want to show the link as a normal text use this.

 .select-slot__serviceStaffOrLocationButton___5GUjl
{
pointer-events: none; 
cursor: default; 
text-decoration: none; 
color: black; 
}