CSS3’s content property allows for content to be added to the page from within the CSS. This is useful in styling, but it’s especially useful if for some reason you don’t have access to or don’t want to edit your HTML files. The content property is used in conjunction with the :before and :after pseudo-selectors to make content appear before or after certain HTML elements.
Let’s say you wanted a question mark to appear after every h1 element. Below is the h1 tag before the content property is applied to it, followed by the CSS for adding a question mark after the h1 element using the content property.
- h1:after{
- content: "?";
- }
The result of the above CSS should be this:
You can add style rules to your pseudo selected element just like you would to any other element. You can change the color, font-size, and even the placement (HOWEVER – you can only change the placement/add margins or padding by defining the position of the pseudo-selected element as absolute. If you don’t take this step then any margins or padding you add will be ineffective).
- h1:after{
- content: "?";
- color: #ff0074;
- font-size: 50px;
- }
You can even use the content property to insert an image into your HTML using a url() syntax, like this:
- h1:after{
- content: url(insert/path/to/image);
- }