WeasySuite - 12.1 The :before and :after pseudo-elements

Chapter 12 - Generated content, automatic numbering, and lists - 12.1 The :before and :after pseudo-elements

Go to the relevant page of the specification.

after-content-display-001: :after generated content - display inline
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-002: :after generated content - display block
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-003: :after generated content - display list-item
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-005: :after generated content - display inline-block
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-006: :after generated content - display table
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-007: :after generated content - display inline-table
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-008: :after generated content - display table-row-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-009: :after generated content - display table-header-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-010: :after generated content - display table-footer-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-011: :after generated content - display table-row
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-012: :after generated content - display table-column-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element. Elements with 'display' set to 'table-column' or 'table-column-group' are not rendered (exactly as if they had 'display: none').
after-content-display-013: :after generated content - display table-column
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element. Elements with 'display' set to 'table-column' or 'table-column-group' are not rendered (exactly as if they had 'display: none').
after-content-display-014: :after generated content - display table-cell
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-015: :after generated content - display table-caption
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-016: :after generated content - display none
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-017: :after generated content - display inherit
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
after-content-display-018: :after generated content - initial value of display
The initial value of the 'display' for generated content property is 'inline'.
after-inheritable-001: Pseudo-element ':after' inherits inheritable values
The pseudo-element ':after' generated content inherits any inheritable properties from the element.
after-inheritable-002: Pseudo-element ':after' does not inherit non-inheritable values
Non-inherited properties apply their initial value when applying to ':after'.
after-location-001: After applies after text
After places the generated content after the element content.
before-after-001 (invalid): Before, after applies to same selector
Multiple pseudo-elements cannot be placed on the same selector.
before-after-002: Before, after is included in formatting changes
Generated content is included in any formatting changes made to an element.
before-after-display-types-001: generated content
before-after-floated-001: generated content
before-after-positioned-001: generated content
before-after-table-parts-001: generated content
before-content-display-001: :before generated content - display inline
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-002: :before generated content - display block
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-003: :before generated content - display list-item
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-005: :before generated content - display inline-block
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-006: :before generated content - display table
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-007: :before generated content - display inline-table
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-008: :before generated content - display table-row-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-009: :before generated content - display table-header-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-010: :before generated content - display table-footer-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-011: :before generated content - display table-row
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-012: :before generated content - display table-column-group
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element. Elements with 'display' set to 'table-column' or 'table-column-group' are not rendered (exactly as if they had 'display: none').
before-content-display-013: :before generated content - display table-column
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element. Elements with 'display' set to 'table-column' or 'table-column-group' are not rendered (exactly as if they had 'display: none').
before-content-display-014: :before generated content - display table-cell
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-015: :before generated content - display table-caption
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-016: :before generated content - display none
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-017: :before generated content - display inherit
Generated content can have their own display value explicitly set in which case they behave as if they were real elements inserted just inside their associated element.
before-content-display-018: :before generated content - initial value of display
The initial value of the 'display' for generated content property is 'inline'.
before-inheritable-001: Pseudo-element ':before' inherits inheritable values
The pseudo-element ':before' generated content inherits any inheritable properties from the element.
before-inheritable-002: Pseudo-element ':before' does not inherit non-inheritable values
Non-inherited properties apply the initial value when applying to ':before'.
before-location-001: Before applies before text
Before places generated content before the element content.
list-style-position-010: Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The presence of the :before pseudo element in this context, must have no affect on the position of the marker box of the associated element as it must still appear to the outside left edge of it's own principal box (since 'list-style-position:outside').
list-style-position-011: Marker box position (inside principal box) - :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. Since the marker box of the associated element must be the first inline element within it's principal box (since 'list-style-position:inside'), that marker box must appear before the marker box and principal box of the :before pseudo-element.
list-style-position-012: Marker box position (inside principal box) - :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. Since the marker box of the associated element must be the first inline element within it's principal box (since 'list-style-position:inside'), that marker box must appear before the marker box and principal box of the :before pseudo-element.
list-style-position-013: Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The position of the marker box of the associated element must still appear to the outside left edge of it's principal box (since 'list-style-position:outside') and should be positioned towards the top of this principal box. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).
list-style-position-014: Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since this :before pseudo element is floated left, the document tree content of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the associated element must not be affected, as it must still appear to the outside left edge of it's principal box (since 'list-style-position:outside').
list-style-position-015: Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box and a marker box which is positioned outside of that principal box (since 'list-style-position:outside). Since this :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the :before pseudo element must still appear to the outside left edge of it's associated element's principal box (since 'list-style-position:outside').
list-style-position-016: Marker box position (inside principal box) - floated :before pseudo-element list-item ('list-style-position:inside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, the principal box (and marker box, since 'list-style-position:inside') of the associated element must appear alongside (after) the :before pseudo element.
list-style-position-017: Marker box position (outside principal box) - floated :before pseudo-element list-item ('list-style-position:outside')
When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). Since the :before pseudo element is floated left, The document tree content of the associated element must appear alongside (after) the :before pseudo element. Since the marker box of the :before pseudo element should be positioned at the same coordinate as the associated element's marker box, either bullet could appear in front of the other (since stacking levels of marker boxes aren't defined in CSS2.1, in this context).