attr() Function in CSS

In CSS, the attr() function is a powerful tool that allows you to retrieve and use the value of an HTML attribute within your styles. It’s super handy for keeping your CSS dynamic and connected to your HTML structure

This function takes the name of the attribute as its parameter and returns its value. It’s like having a direct bridge between your HTML and CSS, making your styling more dynamic and adaptable.

Why is attr() important

It enhances accessibility by allowing you to style content based on its attributes, making your design more inclusive. Plus, it promotes cleaner code and reduces redundancy by eliminating the need for extra markup just for styling purposes.

With attr(), your CSS becomes more efficient and flexible, leading to a smoother development experience. And it is very easy to use in CSS.

Let’s dive into a couple of examples to understand how to use the attr() function in CSS effectively.

Example 1: Styling a Heading with its Content

<h1 data-heading="Welcome!">Hello</h1>

h1::after {
    content: attr(data-heading); /* Displays the value of 'data-heading' attribute */
    color: blue;
}

In this example, we’re using the value of the data-heading attribute to dynamically style the content of the heading.

Example 2: Styling an Image with Alt Text

<img src="image.jpg" alt="Beautiful landscape">

img::after {
    content: attr(alt); /* Displays the value of 'alt' attribute */
    font-style: italic;
    color: green;
}

Here, we’re utilizing the value of the alt attribute of <img> tag to add supplementary styling to the image.

Being Tricky 😉

More Tricks

• How to Inline Style in ReactJS?
• Gradient Underlines with CSS
• Change Text Selection Color with CSS
• Add a CSS class to WooCommerce Shop Page
• Custom Checkbox As Toggle Button

FAQs