content: ***;

  • IE
  • Cr
  • Sf
  • Fx
  • O

The content property generates content before or after an element.

This property is used with the "before" and "after" pseudo-elements.

p:before {
content: url(icon.gif);

p:after {
content: "Text";

Property Value Explanation
content string, URL, and other values generated content
When you specify the text
content: "Example";
When you specify the image
content: url(example.gif);

The "before" and "after" pseudo-elements

  • before : Generates content before an element.
  • after : Generates content after an element.


<title>TAG index</title>

<style type="text/css">

p:before {
content: url(image/icon.gif);

p:after {
content: "[After Text]";
color: red;



<p>This is example text.</p>



This is example text.