CSS generated content and positioning

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.

One thought on “CSS generated content and positioning”

  1. 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.


Leave a Reply

Note: Only a member of this blog may post a comment.