The CSS content property allows you to add content or space to a page without having to touch the HTML. CSS content is used with the pseudo selectors :before or :after, and won’t work without them. As long as you remember your pseudo selectors, adding text, images, or even space to a page using CSS content is easy and requires very little code.
The basic syntax is simple. For example, if you wanted an exclamation point to appear after every <p> tag, you would use the p selector in conjunction with the pseudo selector :after, and the content (in this case, it would be an exclamation point) would be a parameter of the content property. Here’s what that would look like:
Once you’ve inserted your content, you can use the pseudo selector to style it just like you’d style any other HTML element.
You can also use the content property to add images or videos by using the property with a url parameter, which would look like this:
Despite the fact that it’s fairly easy to use, the content property isn’t without its quirks. The quirk that seems to trip people up most often is having to set a position: absolute to the pseudo selector in order to move the content around at all by giving it margins or padding. Giving a pseudo selector absolute positioning in order to move the content looks like this:
The more comfortable you get with using the CSS content property, the easier it is to manipulate and the more versatile it becomes. Using the content property almost feels like cheating, and in a way it sort of is. It may not ever be the right method to insert content into a page, but in certain cases it certainly seems to be the simplest, and ultimately it’s a really useful tool that any developer should have in their CSS arsenal.