There have been some slight changes in CSS generated content and positioning. Let's say that we have an heading and we want to insert a small icon just before its content, like so:
div.note h2:before {
content: url(http://dev.css-zibaldone.com/img/note.gif);
padding-right: 5px;
display: inline-block;
position: relative;
top: 10px;
}
We've used relative positioning to make the icon appear vertically aligned with the heading's text. The declaration display: inline-block has been used in order to apply further block-level rules to generated content, though this is not the case.
You can see the final result here.
Hi Gabriele,
In the css-d-request@lists.css-discuss.org you asked if your example of CSS generated content and positioning works in IE8. I tried it and it does on my computer.
I've learned a lot from you and the others in the css-discuss. Thank you.
Frank