1. Float and counters
According to CSS 2.1 specs,
the 'float' property can be applied to all elements. In the CSS2 specs, however, the 'float' property cannot be applied to generated
content. This is an important difference. Today only Opera (Opera 9.x and lower version) extends the float model to generated content.
The previous example shows what happens when the 'float' property is applied to counters. Here's how it looks in Opera:
CSS code
body {counter-reset: album;}
h3.test:before {
counter-increment: album;
content: "n" "." counter(album) " " "-";
float: left;
color: #000;
margin-right: .5em;
}
@media all and (min-width: 0px) {
h3.test {text-align: center;}
}
The @media rule hack marked in maroon is used to show the effect of the float model on Opera. Firefox ignores the declaration. A special care
should be taken if we want to specify a width for the floated pseudo-element. In fact, if there are too many elements generated through
the 'content' property, it couldn't be enough space to contain them, and
the elements won't be showed.
A man hung from a lamppost at Fifth and East Fifty-fourth, below the park and in a oncecongested business district, a placard
with the single word LOOTER hang around his neck. The streets were crammed and silent, frozen rivers of automobiles in
every color, predominated by the yellow of the taxi cabs. Many of the cars had become hearses, their decaying drivers still
leaning behind the wheels, their passengers slumped as if, weary of the traffic jam, they had fallen asleep.
The tollbooths were empty. The middle one stood in a heap of broken glass. Beyond them, the westbound lanes were empty for
as far as they could see, but the eastbound lanes, the ones which fed into the tunnel and the city they had just left, were
crowded with silent traffic. There was an untidy pile of bodies in the breakdown lane, and a number of seagulls stood
watch over it. He saw two pages of the Las Vegas Sun go riffling by. The headline that revelead itself over and over again
as the paper flapped and turned was PLAGUE GROWS WORSE WASHINGTON MUTE. - Stephen King, The Stand
2. Float and images
The effects of float are more evident when applied to images, as showed in the figure below:
CSS code
p.photo:before {
content: url(prison.jpg);
float: left;
margin-right: 8px;
margin-bottom: 8px;
}
p.photo {
margin-right: 20em;
}
The content of the pseudo-element is an image. In Opera the image is floated to the left, and the text of the paragraph
flows around it.