How to remove underline from a:before using CSS ?

Last Updated : 23 Apr, 2020

The a:before is used to create an element before the content of the anchor tag and it displays underlined a:before part by default. To remove the underline from a:before using the text-decoration property of CSS and set element display to inline-block. Syntax:

text-decoration:none;
display:inline-block;

Example 1: This example sets the text-decoration property to none.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to remove underline
        from a:before using CSS?
    </title>

    <style>
        #test a {
            color: #05ff05;
            text-decoration: none;
        }

        #test a:before {
            color: #05ff05;
            content: "* ";
            text-decoration: none;
            display: inline-block;
        }
    </style>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">GeeksForGeeks</h1>
    <h3>Original Link</h3>
    <a href="https://www.geeksforgeeks.org/">Link 1</a>
    <br>
    <div id="test">
        <h3>Removed Underline</h3>
        <a id="GFG" href="https://www.geeksforgeeks.org/">
            Link 2
        </a>
    </div>
</body>

</html>

Output:

Example 2: This example uses hover property to remove underline when mouse move over the a:before part.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to remove underline
        from a:before using CSS?
    </title>

    <style>
        #test a {
            color: #05ff05;
        }

        #test a:hover {
            color: #05ff05;
            text-decoration: none;
        }

        #test a:before {
            color: #05ff05;
            content: "**";

        }

        #test a:before:hover {
            color: #05ff05;
            content: "**";
            display: inline-block;
            text-decoration: none;
        }
    </style>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">GeeksForGeeks</h1>
    <h3>Original Link</h3>
    <a href="https://www.geeksforgeeks.org/">Link 1</a>
    <br>
    <div id="test">
        <h3>Removed Underline</h3>
        <a id="GFG" href="https://www.geeksforgeeks.org/">
            Link 2
        </a>
    </div>
</body>

</html>

Output:

Example 3: This example removes the underline only from a:before part.