CSS Properties: How to set the content as one of the selector's attribute?

Last update on February 21 2024 12:44:59 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set the content as one of the selector's attribute</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
a:before {
content: attr(href); /* Inserts the value of the 'href' attribute of the <a> element before the content of the <a> element */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<a href="https://www.w3resource.com">(w3resource Tutorial)</a><!-- Inserts an anchor element with a hyperlink -->
<p>The attr() property inserts a specified attribute's value before or after the selected element(s).</p><!-- Inserts a paragraph element -->
</body>
</html>

Explanation:

This HTML document demonstrates how to use the attr() CSS function to insert the value of an attribute as content.
The CSS rule a:before selects the pseudo-element ::before of all <a> elements.
The content: attr(href); property inserts the value of the 'href' attribute of the <a> element before the content of the <a> element.
In this example, the hyperlink text "(w3resource Tutorial)" is preceded by the URL specified in the href attribute of the <a> element.

Live Demo:

See the Pen content-attribute-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page