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 |
The "before" and "after" pseudo-elements
before : Generates content before an element.
after : Generates content after an element.
When you specify the text
content: "Example";
When you specify the image etc
content: url(example.gif);
content: url(example.wav);
<html> <head> <title>TAG index</title> <style type="text/css"> p:before { content: url(image/icon.gif); } p:after { content: "[Not supported by MSIE]"; color: red; } </style> </head> <body> <p>This is example text.</p> </body> </html>
This is example text.