CSS2 Generated Content
Examples
Please note that Internet Explorer does not support generated content. So the examples on this page won't work if you are browsing with Internet Explorer.
- :before and :after Pseudo-Elements
- Changing the Display State
- Generate Content
- Generate an Image
- Generating Quotation Marks
- Return to Generated Content Article
:before and :after Pseudo-Elements
If you're using Mozilla, you will see the word "Note:" at the beginning of this paragraph. View the source to see that the word is not part of the HTML.
Return to Generated Content Article
Changing the Display State
This paragraph will have a series of 3 asterixes displayed after it, centered.
Return to Generated Content Article
Generate Content
The last words in this paragraph will be the end. However, it will not be in the HTML document itself, just the CSS.
Return to Generated Content Article
Generate an Image
This paragraph is preceded by a little red ball image. This feature can be very useful for designating items within the content of your HTML. Perhaps an icon indicating links that are on your site or off of it?
Return to Generated Content Article
Generating Quotation Marks
Twas brillig and the slithey toves did gyre and gimble in the wabe.
