CSS: insert HTML attribute text. attr()

By Xah Lee. Date: .

What is attr()

attr(attribute) return the text of an element's attribute attribute

it is use for adding content using the ::before or ::after pseudo-element.

example. Use CSS to auto append URL for links

click here 

<div class="x-ref">
 <p>click <a href="http://example.com/">here</a></p>
</div>
.x-ref a[href]::after {
 content: " at url " attr(href);
}

example. Use CSS to add link accessed date.

http://example.com/ 

<div class=".xcite">
 <p>
  <a href="http://example.com/" data-accessed="2026-06-07" target="_blank" rel="noreferrer">http://example.com/</a>
 </p>
</div>
a[data-accessed]::after {
 content: " date accessed: " attr(data-accessed);
}

browser support

supported by all major browsers since 2016.

CSS insert content