YouTipHover over the word: tooltip
[Run it »](#) ### Browser Support The numbers in the table specify the first browser version that fully supports the function. | Function | Chrome | Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | `attr()` | 2.0 | 12.0 | 1.0 | 3.1 | 9.0 | **Note:** The `attr()` function can be used with any CSS property, but browser support for using it with properties other than `content` is limited. ### CSS Functions | Function | Description | | :--- | :--- | | `attr()` | Returns the value of an attribute of the selected element | | `calc()` | Allows you to perform calculations to determine CSS property values | | `cubic-bezier()` | Defines a Cubic Bezier curve to be used in a transition effect | | `hsl()` | Defines colors using the Hue-Saturation-Lightness model | | `hsla()` | Defines colors using the Hue-Saturation-Lightness-Alpha model | | `linear-gradient()` | Sets a linear gradient as the background image | | `radial-gradient()` | Sets a radial gradient as the background image | | `repeating-linear-gradient()` | Repeats a linear gradient | | `repeating-radial-gradient()` | Repeats a radial gradient | | `rgb()` | Defines colors using the Red-Green-Blue model | | `rgba()` | Defines colors using the Red-Green-Blue-Alpha model | | `var()` | Defines a custom property (CSS variable) |Func Attr
## CSS attr() Function
The `attr()` function returns the value of an attribute of the selected element.
### Definition and Usage
The `attr()` function returns the value of an attribute of the selected element.
The attribute can be any valid HTML attribute, such as `href`, `src`, `alt`, `title`, etc.
The `attr()` function can be used with the `content` property to insert the value of an attribute into the generated content of an element.
**Note:** The `attr()` function is most commonly used with the `content` property in pseudo-elements like `::before` and `::after`.
### Syntax
```css
attr(attribute-name)
**Parameter Values:**
| Value | Description |
| :--- | :--- |
| *attribute-name* | Required. Specifies the name of the attribute whose value is to be returned. |
### Examples
#### Example 1
Use the `attr()` function to insert the value of the `href` attribute of a link as the content of a pseudo-element:
a::after {
content: " (" attr(href) ")";
font-size: 12px;
color: #999;
}
[Run it »](#)
#### Example 2
Use the `attr()` function to insert the value of the `data-tooltip` attribute as the content of a pseudo-element:
.tooltip {
position: relative;
border-bottom: 1px dotted black;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover::after {
opacity: 1;
}