CSS content property
This CSS property generates dynamic content. It can be used with the pseudo-elements ::before and ::after. This CSS property is fully supported in all browsers and used to insert the generated content on a web page.
It replaces the element with the generated value.
Syntax
Property Values
This CSS property has numerous values that are defined in the following table:
Values | Description |
---|---|
normal | It is used to set the default value |
none | This value does not set the content. |
counter | It sets the content as the counter. It is generally a number. It is displayed by using the counter() or counters() function. |
string | It is used to set any string value. It should always be enclosed within quotation marks. It generates any string after or before the HTML element. |
attr | It inserts the value of the specified attribute after or before the element. If the selector does not have a particular attribute, then an empty string will be inserted. |
open-quote | It is used to insert the opening quotation mark, or it sets the content to be an opening quote. |
close-quote | It is used to insert the closing quotation mark, or it sets the content to be a closing quote. |
no-close-quote | If the closing quotes are specified, then it is used to remove the closing quote from the content. |
no-open-quote | If the opening quotes are specified, then it is used to remove the opening quote from the content. |
url | It is used to set the content to some media, which could be an image, video, audio, and many more. |
Initial | It is used to set the property to its default value. |
Inherit | It inherits the property from its parent element. |
Let’s see some of the illustrations of this CSS property.
Example – Using normal and none value
In this example, we are using ::before pseudo-element for inserting the text “Welcome “ before the paragraph elements. The text will not be added to those paragraph elements on which we applied the values normal and none.
Output
Example – Using string and url value
In this example the text “Hello World. Welcome “ is added by using the content property and ::before pseudo-element.
Output
Example – Using open-quote and close-quote value
We cannot apply close-quote without open-quote.
Output
Example – Using no-open-quote and no-close-quote value
In this example, we have applied the open-quote and close-quote on paragraph elements, and on paragraph with class .para we applied the no-open-quote and no-close-quote.
Output
Example – Using attr()
The attr() function allows us to insert the value of a particular attribute. If the corresponding element does not have an attribute, then an empty string will be returned.
In this example, the link displayed on the screen is by using the attr() function.
Output