Treehouse: Grow your CSS skills. Land your dream job.

content

Last updated on:

The content property in CSS is used in conjunction with the pseudo elements ::before and ::after. It is used to literally insert content. There are four value types it can have.

String

.name::before {
  content: "Name: ";
}

Then an element like this:

<div class="name">Chris</div>

Would render like this:

Name: Chris

It could also be an empty string, which is commonly seen in things like the clearfix.

Counter

div::before {
  content: counter(my-counter);
}

More information about that.

Image

div::before {
  content: url(image.jpg);
}

This is literally an image on the page like <img> would be. It could also be a gradient. Note that you cannot change the dimensions of the image when inserted this way. You could also insert an image by using an empty string for the content, making it display: block in some way, sizing it, and using background-image. That way you could re-size it with background-size.

Attribute

You can use values (strings, anyway) that are taken right from attributes in the HTML.

<div data-visual-label="Widget Rating">60</div>
[data-visual-label]:before {
  content: attr(data-visual-label) ": ";
}

More Information

Content inserted in this was isn't really in the DOM, so it has some limitations. For instance you can't attach an event directly (only) to a pseudo elements. It is also inconsistant whether or not text inserted in this way is read by screen readers or if you can select it.

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any 4+ 8+ Any Any

For Opera, url() only supported in version 7+.

Comments

  1. Arron Hunt

    …holy gumballs batman you can use counters!? And just when I think I know everything there is to know about CSS…

  2. Jenna

    If only attr() had greater browser support for it’s url <type-or-unit> keyword:

    http://jsbin.com/ujeyok/1/edit

    • Bali Balo

      True ! I’m waiting for it too. We could do a lot with this.

  3. ApplePi

    A great use of this would be print stylesheets. You show the URL beside links.

    HTML

    <a href="http://example.com">Check out this example site!</a>
    

    CSS

    a::after {
      content "(" attr(href) ")";
      color: #ccc;
    }
    
  4. Sumeet Chawla

    Woah, the counter and the attribute method is really powerful. Till now I just used this to create special elements to add visual effects

  5. Luke Gedeon
    Permalink to comment#

    Any suggestions on how to add an image using css and make it 100% width and keep it proportional as the window changes? I was trying :before with a url which got me here, but I seem to be rather stuck.

  6. Max
    Permalink to comment#

    Can we combine content: url(image.jpg); width content: attr(data-image); ?
    Something like this url(attr(data-image));

  7. Easy Home Noida
    Permalink to comment#

    I just want to mention that I certainly enjoyed you’re page. Likely I’m planning to bookmark your site . You really come with amazing articles. With thanks for sharing with us your blog site.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```