CSS content and attr

By  on  

CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a bit of this with CSS counters, where we used the counter and counters expressions to set the content of a given element.  There's another expression, attr, that allows for CSS-based content creation as well. Let me show you how attr an content can work together!

Basic content Usage

The content property allows the developer to statically or (somewhat) dynamically set the content of a pseudo-element:

.myDiv:after { content: "I am hardcoded text from the *content* property";  }

Remember to make the element (not the pseudo-element) position: relative if you plan to absolutely position the pseudo-element.

content and attr

In the case that you'd like to use an element attribute as content (this being the dynamic usage of content), you may do so with the attr expression:

/* <div data-line="1"></div> */

div[data-line]:after { 
	content: attr(data-line); /* no quotes around attribute name! */

attr is typically used with custom data- attributes since traditional element attributes are good for functionality but not so much or text presentation.

content Concatenation

Concatenating strings is done via simple spacing:

/* <div data-line="1"></div> */

div[data-line]:after { 
	content: "[line " attr(data-line) "]"; 

Trying to concatenate via JavaScript "+" or any other symbol will bomb ... not that I found that out the hard way or anything...

The ability to use generated content with an attr expression is quite exciting.  You can see this used within PrismJS' line-highlighting plugin and a line-number plugin I'll release soon.  These generated content tactics make pseudo-elements all the more valuable too!

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    Better Pull Quotes with MooTools

    Chris Coyier authored a post titled Better Pull Quotes: Don't Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content -- instead he uses jQuery to dynamically create the pull quotes. The following is the...

  • By
    Redacted Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...


  1. thanks for this! I first saw the attr() expression from this codepen: http://codepen.io/TrentWalton/pen/bImfn

    Is there anyway to get the value of the inner text? like .innerHTML in JS?

    seems silly to write the content ‘gzip’ twice, when all we want to do is duplicate the content inside a given element.

  2. dj

    Nice, concise tip. Don’t forget to give the HTML code, which your CSS is working against, within the body of the article text – for ease of reading and clarity sake.

  3. Good writeup, David! I’d like to point out that content and attr are also good solutions for translated/internationalized content. The translated content can be defined as an element attribute instead of creating/maintaining translated content in stylesheet(s).

  4. Aaron

    What is the browser support for this?

  5. Also, this is very useful if you have to provide a printable page, this way you don’t lose any links and other information that might be useful.

  6. I love the trick, but with what I tried, copy/paste doesn’t work if the text is added with CSS ‘content’. In a lot of contexts, it makes this technique unusable as copy/paste really is an awesome feature!

  7. Cameron Bright

    very very USEFUL ! solved my problem, I first tried to use multiple pseudo elements but this is better,

  8. César Pacha

    Is it possible to use this pseudo selector with an image and display a content with it’s url? something like this



  9. span:before{
    content: attr(data-text);

    I want to replace “data-text”s content by css. data-text placed in php. so if i chenge ‘content: ‘my text’; is not working. How can i change it?

    • What’s the issue exactly? If you want the content from a data-text attribute to appear, just leave it data-text. Otherwise, just change what attribute it should be referring to.

  10. @César Pacha: In theory yes, though doesn’t seem to support use of the :before and :after pseudo selectors:


  11. Samuel Willems

    @Edward it does! However img doesn’t suport pseudo elements c;

  12. Wow, I half-heartedly Googled this issue thinking it probably doesn’t exist, but it totally does! Thank you so much for making me aware.

  13. Just looking at the CSS Values and Units Module Level 3 editors draft. attr() is planned to work for all properties rather than just content.

    This opens up incredible possibilities for frameworks like bootstrap in the future (when browser support catches up).

    c[sm] {
    	/* Width = (100% / TotalColumns) * ColumnSmall */
    	width: calc( calc( 100% / attr(tc integer, 12) ) * attr(sm integer, 0) );
    	Column with default total columns of 12
    	Column with total columns set to 10 causing sm=5 to set the width to 50%.
    	Completing with a second column at 50%.

    This functionality brings a whole new layer to the CSS game. I’m very excited to see this implemented.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!