How to Make a Link Look Like a Normal Text using CSS?

By default, links are styled with Blue color text and an underline in most of the web browsers. However, you can very easily get rid of this default behavior and change the look of the links the way you want.

To make a link look like a normal text, we have to change the values of the color, text-decoration, and the cursor property.

The color property will change the link color, text-decoration will help remove the default underline and the cursor property will help us get rid of the hand pointer and change it to the auto.

See this example:

Example:

a.text-link{
    color: inherit;  /* Inherit color from parent */
    text-decoration: none; /* Removes underline */
    cursor: auto;  /* Changes hand cursor to auto */
}

In the above example, Although we have made the link look like a normal text, still it is clickable.

So, if you want the link to remain unclickable too, you have to set the pointer-events property to none.

See this example:

Example:

a.text-link{
    color: inherit;   
    text-decoration: none;
    cursor: auto;
    pointer-events: none; /* Makes link unclickable */
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts