Generated content in CSS; powerful!

Opera 7.54 Win does all of these tests "perfectly"! That is, as I expect them to work.

`:before` and `:after` styles

Let's see which styles can be applied to :before and :after.

1 - Floated right:

2 - Positioned absolute, top right:

3 - Positioned relative, 30px top left:

4 - Display block, background, border, padding:

5 - Display block, margin 100px:

User agents must ignore the following properties with :before and :after pseudo-elements: 'position', 'float', list properties, and table properties.

This is removed in CSS2.1.

Blockquotes and quotes

Again: some positioning of :before and :after.

This is a blockquote in English:

In CSS2.1, authors may specify, in a style-sensitive and context-dependent manner, how user agents should render quotation marks. The 'quotes' property specifies pairs of quotation marks for each level of embedded quotation. The 'content' property gives access to those quotation marks and causes them to be inserted before and after a quotation.

This is a blockquote in Latin:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a blockquote in French: (note the generated « and »)

La raison prépondérante est claire comme de l'eau de Google: les résultats de recherche les plus pertinents et les plus rapides! L'extraordinaire volume d'informations disponible sur le Web n'est séduisant que si vous disposez d'un service de recherche vous permettant d'accéder rapidement et efficacement à l'information utile à vos besoins. En l'absence d'un outil de recherche puissant et efficace, il peut être très difficile -- voire impossible -- de retrouver l'information requise. Voici quelques raisons qui justifient le choix de Google.

`:hover` on `:before`, the element itself and `:after`

Hovering the next line 'should' generate three parts (:hover:before, :hover and :hover:after; all styled with content:):

Hover this line.

Hovering the link in the next line 'should' generate three parts (:hover:before, :hover and :hover:after; all styled with content:):

Hover this link.

12.2 The 'content' property

Applies to: :before and :after pseudo-elements

Moz/FF seem to really follow the specification on this one ;)

URI's

Some generated content from a URI:

(Doesn't work in Opera/Gecko)

Counters

Coming up

Home - More stuff