Quick Reference
The content property is used with the ::before and ::after pseudo-elements, to insert content before or after an element.
ul li::before {
content: "added info before - ";
}ul li::after {
content: " - added info after";
}Default
| Default value | normal |
| Inherited values | no |
| Can it be animated? | no |
These are the allowed values.
| Value | Description |
|---|---|
| normal | Sets the content, if specified, to normal, which default is "none" (default) |
| none | Sets the content to nothing |
| counter | Sets the content as a counter |
| attr(attribute) | Sets the content as one of the selector's attribute |
| string | Sets the content to the text you specify |
| open-quote | Sets the content to be an opening quote |
| close-quote | Sets the content to be a closing quote |
| no-open-quote | Removes the opening quote from the content |
| no-close-quote | Removes the closing quote from the content |
| url(url) | Sets the content to be some kind of media (image, audio, video, etc.) |
| initial | Sets this property to its default value |
| inherit | Inherits this property from its parent element |
CSS Notes:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.