CSS Content Property
FREE
Overview
The content in CSS defines the content of an element. This property only applies to the ::before and ::after pseudo-elements. In this article, we'll look at how the content attribute can be used outside of pseudo-elements.
Syntax of Content in CSS
Content Property in CSS
- The content property in CSS is used to generate dynamic content (during runtime), which replaces the element with the generated content value. It is used to generate the pseudo-elements content::before and content::after.
- A CSS pseudo-element is a keyword that can be added to a selector to style a specific portion of the selected elements. For example, styling the first letter or line of an element.
- To add something after the content, we use ::after selector, while to add something before the content of each selected element, we use ::before selector.
- We can insert content before or after an element's content, and all of this is possible with CSS Pseudo Elements.
none
When applied to a pseudo-element, it does not generate the pseudo-element. The value has no effect when applied to an element.
normal
It specifies the default value. This equals none for the ::before and ::after pseudo-elements.
<string>
It is used to set any string value. It should always be surrounded by quotation marks. It generates any string that comes after or before the HTML element. Specifies the "alt text" for the element.
<image>
An \<image> attribute is denoted by the url() or \<gradient> data types or a section of the webpage, denoted by the element() function, indicating the content to be displayed.
counter()
- It establishes the content as the counter. A CSS counter's value is typically a number produced by computations defined by the < counter-reset> and \<counter-incerement> properties. It can be shown using the counter() or counters() functions.
- The counter() function exists in two forms: counter(name) and counter(name, style). The generated text is the value of the given name's innermost counter in scope at the given pseudo-element. It is specified and formatted in the \<list-style-type> (decimal by default).
- The counters() function exists in two forms: 'counters(name, string)' and 'counters(name, string, style)'. The generated text is the value of all counters in scope at the given pseudo-element with the given name, from outermost to innermost, separated by the specified string. The counters are displayed in the specified \<list-style-type> (decimal by default).
attr
It appends or inserts the value of the specified attribute after or before the element. An empty string is returned if the selector does not contain a specific attribute. The document language determines the case sensitivity of attribute names.
open-quote
It inserts the opening quotation mark or sets the content as an opening quotation.
close-quote
It inserts the closing quotation mark or sets the content as a closing quotation.
no-open-quote
If the opening quotes are specified, then it is used to remove the opening quote from the content.
no-close-quote
If the closing quotations are specified, then it is used to remove the closing quote from the content.
Examples of Content in CSS
Headings and Quotes
Example: This example has quotation marks around quotes as well as the word "Chapter" before headings.
Output of the above code:
Image Combined with Text
Example: In this example, an image is placed before the link. If the image cannot be retrieved, the text is used instead.
Output of the above code:
Targeting Classes
Example: This example adds extra text after special items in a list.
Output of the above code:
Images and Element Attributes
Example 4: This example places an image before each link and then adds an id property after it.
Output of the above code:
Element Replacement
Example: This example replaces the content of an element with an image. You can use url() or \<image> values to replace the contents of an element. Content inserted with ::before or ::after will not be created as the element's contents have been altered.
Output of the above code:
Note: Replacement is not supported in IE.
Accessibility Concerns with Content in CSS
- The DOM (Document Object Model )is the data representation of objects that contains the structure and content of a document on the web and does not include CSS-generated content. As a result, it will not be represented in the accessibility tree (the accessibility tree contains accessibility-related information for most HTML elements), and certain assistive technology/browser combinations will not notify you of it.
- It is preferable to include the content in the main document if it delivers information that is crucial to understanding the page's purpose.
Browser Support
The following browsers support the content property of CSS:
| Browser | Google Chrome | Internet Explorer | Microsoft Edge | Firefox | Opera | Safari |
|---|---|---|---|---|---|---|
| Version Support | Yes | Yes | Yes | Yes | Yes | Yes |
| Download | 1.0+ | 8.0+ | 12.0+ | 1.0+ | 4.0+ | 1.0+ |
Conclusion
- The CSS content property produces dynamic content. It can be used with any pseudo-element ::after and ::before to insert content. The content can be of any type, like Text, photos, symbols, emojis, etc. However, the content attribute has a wide range of applications.
- It is commonly used for bulk element updates. If you want to add an icon before every link on your site, using the content property is considerably easier than adding it to each element in the HTML document.
- The CSS content property is fully supported by all browsers and is used to insert content on the web page. It can be used to replace any item that generates value. The property will insert any content the developer desires.
- The recommendation is to incorporate only decorative content using this technique using the ::before and ::after pseudo-elements.