content: ***;

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

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

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

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

</style>

</head>
<body>

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

</body>
</html>
Output

This is example text.