CSS content and attr

Discussion

1. Jesse

   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. Garrick Cheung

   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?
• David Walsh

  IE8+ :D
5. Andrew

   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. David Bruant

   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

   .galImg:after{
   content:attr(src);
   …
   }
9. Saiful

   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?
• DaVince

  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. Edward Morbius

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

    http://codepen.io/anon/pen/GgPdXN
11. Samuel Willems

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

    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. Zei

    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.