CSS attr() Function

The attr() function is an inbuilt function in CSS that returns the value of an attribute of the selected elements.

Syntax:

attr( attr_name )

Parameter: This function accepts a single parameter attr_name which is used to hold the name of the attribute in an HTML element. It is a mandatory parameter.

Return Value: This function returns the value of the attribute of selected elements.

Example: The below example illustrates the attr() function in CSS:

html

<!DOCTYPE html>
<html>

<head>
    <title>attr function</title>
    <style>
        a:before {
            content: attr(href) " =>";
        }
        
        a {
            text-decoration: none;
        }
        
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="gfg">GeeksforGeeks</div>
    <h1>The attr() Function</h1>
    <a href=
"https://www.geeksforgeeks.org/">
        GeeksforGeeks
    </a>
</body>

</html>

Output:

Supported Browser:

Google Chrome
Edge
Firefox
Opera
Safari

Explore