content
The content property sets the generated content of an element.
Formal Syntax
normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> | <attr()> ]+ ]? | <element()>
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| content | 1 | 1 | 1 | 12 |
| alt_text | 77 | 128 | 17.4 | 79 |
| close-quote | 1 | 1 | 1 | 12 |
| element_replacement | 28 | 63 | 9 | 79 |
| gradient | 26 | 113 | 7 | 12 |
| image-set | 113 | 89 | 17 | 113 |
| no-close-quote | 1 | 1 | 1 | 12 |
| no-open-quote | 1 | 1 | 1 | 12 |
| none | 1 | 1 | 1 | 12 |
| none_applies_to_elements | — | 91 | — | — |
| normal | 1 | 1 | 1 | 12 |
| open-quote | 1 | 1 | 1 | 12 |
| url | 1 | 1 | 1 | 12 |
Behind a Flag
Some browsers require enabling a flag or preference:
- content: none_applies_to_elements — firefox:
#layout.css.element-content-none.enabled(since 91)
Related Properties
- align-content
- align-items
- align-self
- anchor-name
- anchor-scope
- break-after
- break-before
- break-inside
- caption-side
- clear
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- contain
- container
- container-name
- container-type
- content-visibility
- display
- empty-cells
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- gap
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- justify-content
- justify-items
- justify-self
- order
- overflow
- overflow-anchor
- overflow-block
- overflow-inline
- overflow-wrap
- overflow-x
- overflow-y
- place-content
- place-items
- place-self
- position-anchor
- position-area
- position-try
- position-try-fallbacks
- position-try-order
- position-visibility
- resize
- row-gap
- table-layout
- text-overflow
- visibility
- z-index
- reading-flow 🧪
- reading-order 🧪
- align-tracks 🚧
- block-ellipsis 🚧
- block-step 🚧
- block-step-align 🚧
- block-step-insert 🚧
- block-step-round 🚧
- block-step-size 🚧
- bookmark-label 🚧
- bookmark-level 🚧
- bookmark-state 🚧
- column-height 🚧
- column-rule-break 🚧
- column-rule-outset 🚧
- column-wrap 🚧
- continue 🚧
- float-defer 🚧
- float-offset 🚧
- float-reference 🚧
- flow-from 🚧
- flow-into 🚧
- grid-column-gap 🚧
- grid-gap 🚧
- grid-row-gap 🚧
- inline-sizing 🚧
- item-cross 🚧
- item-direction 🚧
- item-flow 🚧
- item-pack 🚧
- item-tolerance 🚧
- item-track 🚧
- item-wrap 🚧
- justify-tracks 🚧
- region-fragment 🚧
- row-rule 🚧
- row-rule-break 🚧
- row-rule-color 🚧
- row-rule-outset 🚧
- row-rule-style 🚧
- row-rule-width 🚧
- rule 🚧
- rule-break 🚧
- rule-color 🚧
- rule-outset 🚧
- rule-overlap 🚧
- rule-style 🚧
- rule-width 🚧
- wrap-after 🚧
- wrap-before 🚧
- wrap-flow 🚧
- wrap-inside 🚧
- wrap-through 🚧
- page-break-after 🗑️
- page-break-before 🗑️
- page-break-inside 🗑️