The :after pseudo-element specifies generated content that will occur
after an element's document tree content (there is also a companion
:before Pseudo-element for placing generated
content before an element.) This Pseudo-element is used in conjunction with the
'content' property to
specify what is to be inserted. Generated content is not a new concept -
it already plays an important role in the list mechanisms of HTML; in CSS
it has the potential to be very useful in Aural and other rendering media as well.
There are several rules governing the behavior of generated content and
:After Pseudo-elements:
The box model for rendering elements includes the generated content
(eg: 'border' properties are rendered surrounding the element
AND the generated content.)
Properties for the Pseudo-element are inherited from the element they
are attached to.
If the element that the :after Pseudo-element is attached to is a
block level element, values for the 'display' property are limited to
'none', 'inline', 'block', and 'marker'. If any other value is used,
it will be interpreted as if it were 'block'.
If the element that the :after Pseudo-element is attached to is an
in-line element, values for the 'display' property are limited to 'none'
and 'inline'. If any other value is used, it will be interpreted as
if it were 'inline'.
Example
Ext/Doc: table:after {
content: END OF TABLE }
In-Line: NA
Notes
CSS2 states that the 'float', 'list', 'position' and table properties
should be ignored by browsers if they are applied to the :after
Pseudo-element.
CSS2 notes that the special syntax combination of :first-letter or
:first-line Pseudo-elements paired with :after applies to the generated
content as well as to the first letter or line of the element.
:After interaction behavior with 'compact' and 'run-in' elements:
An :after Pseudo-element is attached to an in-line 'run-in' or 'compact'
element - the element's rendering box will include the Pseudo-element.
An :after Pseudo-element is attached to a block level 'run-in' or 'compact'
element - the element and the Pseudo-element are each formatted as separate
block boxes.