In CSS 2, the set of styles you could apply to the :before and :after pseudo-elements. were rather limited:
User agents must ignore the following properties with :before and :after pseudo-elements: 'position', 'float', list properties, and table properties.
The :before and :after pseudo-elements elements allow values of the 'display' property as follows:
- If the subject of the selector is a block-level element, allowed values are 'none', 'inline', 'block', and 'marker'. If the value of the pseudo-element's 'display' property has any other value, the pseudo-element will behave as if its value were 'block'.
- If the subject of the selector is an inline-level element, allowed values are 'none' and 'inline'. If the value of the pseudo-element's 'display' property has any other value, the pseudo-element will behave as if its value were 'inline'.
In the upcoming revision, CSS 2.1 this has been changed, and you are now allowed to both position and float generated content. This brings some interesting possibilites. Let's look at acronyms and abbreviations.
When you hover over any of the elements in the list below, you should see a yellow note in the upper-right-hand corner of the screen, expanding the abbreviation/acronym, and telling you whether it is an acronym or abbreviation:
To see this demo, you will need a user-agent that implements CSS 2.1. Opera versions 7.20 and newer supports this.