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.


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


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

More information about that.


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.


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


  1. User Avatar
    Arron Hunt

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

  2. User Avatar

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

  3. User Avatar

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


    <a href="">Check out this example site!</a>


    a::after {
      content "(" attr(href) ")";
      color: #ccc;
  4. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  7. User Avatar
    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.

  8. User Avatar
    Permalink to comment#

    “content: url(image.jpg);” Doesn’t work nicely on firefox.

  9. User Avatar
    Permalink to comment#

    See the CodePen below:

    I want to add an asterisk, as in the image on the left to the input on the right.

    I am completely stuck and it’s stupid that I don’t see.

    • User Avatar
      Permalink to comment#

      Just add a span around your input element and give it the asterisk class instead of the input. Since ::before + ::after add the content before/after the elements own content and input elements don’t have content, your example doesn’t work.

  10. User Avatar
    Vern Zehr
    Permalink to comment#

    Did not see this mentioned in the comments….

    Raster images (png, jpg, gif) won’t scale in the content of :before|:after but, an svg DOES scale based on the box size.

    Of course the SVG has to be responsive.

  11. User Avatar
    Brad Kemper

    Note that you cannot change the dimensions of the image
    when inserted this way.

    You can if you give it ‘display:block’ or ‘display:inline-block’ (or probably some other display values other than ‘inline’). Or if you float it, or absolute position it.

  12. User Avatar
    Zhong Tang

    Cool thing!

    I just want to know how we can make the text in content property to be displayed as two or more line, for example:

    .before { content: “line 1 line 2 line 3”};

    then it will displayed as:

    line 1
    line 2
    line 3


    • User Avatar
      Casual Visitor
      Permalink to comment#

      content: “line 1 \a line 2 \a line 3”; should do the trick

      \a is the “content “newline sequence.

  13. User Avatar
    Casual Visitor
    Permalink to comment#

    content: “line 1 \a line 2\a line 3”

    \a is the “content” newline code

  14. User Avatar
    Permalink to comment#

    Hey! I am not able to change the width and height of the image by using :before. Could you please help me?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.