How to display a link using only CSS?

To disable the link of any website, we use the properties of CSS like pointer-event set to none, and then the cursor can be set to default which will disable the active link and the users cannot access the links. Sometimes the link has to be disabled to bring some updates or security to the website. The government or organization is the best suited for this example, whenever they need any updation required in the backend of the website they simply disable the link.

In this article, we will display how to display a link using only CSS.


<a href="link_of_any_website" class="class_name"></a>

This is an anchor tag used to represent the link of the sites. The class_name is an attribute used to define the CSS properties of the specific elements.

Properties used

The following properties used in the example are −

  • color − Define the color of the text.

  • opacity − Define the transparency level of the text or image in HTML.

  • text-decoration − Define the decoration added to the text like underline, overline, line-through, underline overline, and none.

  • pointer-event − Define how the element responds to the event. For example- whether the link is active or not active.

  • cursor − Define the movement of the mouse when pointing over to any link.

  • font-weight − Define the text weight be thin or thick.


In this example, we use the two classes whose names are active and not-active. The non-active class set the property named pointer-event which will disable the link that is used in the anchor element but in the active class, the link is enabled.

<!DOCTYPE html>
            color: darkgreen;
            opacity: 0.6;
            text-decoration: none;
            pointer-events: none;
            cursor: default;
            color: blue;
            font-weight: bold;
            opacity: 0.6;
            text-decoration: none;
            color: blue;
            font-weight: bold;
         <h3 style="color: green">(</h3>
         <p>The Disable link:
            <a href="" class="not-active">Click Here</a>
         <p>The Enable link:
            <a href="" class="active">Click Here</a>


We understood the difference between disabling and enabling a link in CSS by using some properties of its. To disable the link, we have set the value to none for some properties of the class named not-active like pointer and text-decoration. Therefore, this way the link is disabled only using CSS.

Updated on: 10-May-2023


Kickstart Your Career

Get certified by completing the course

Get Started