When CSS3 was released, the ability to place text or images after or before HTML items dynamically with CSS was a major new advantage. For instance:
.div:before {
content: "text";
}
That code will place the word ‘text’ before a div. That level of simplicity is useful if you need to dynamically add text to a header or menu item. However, it is generally better to add the text directly into your HTML or other code.
A more useful way to use :after or :before is using it in conjunction with position: absolute. This can be useful for flair items connected to images, paragraphs or anything else. For example:
.div:after {
content: "*";
position: absolute;
top: 5px;
right: 35px;
font-size: 85px;
color: #fff;
}
.div {
position: relative;
}
That would generate something like this:
The div itself would be relative and the :after would be absolute. The two can be positioned differently from one another. So you can get a nice accent mark on images or other content. Likewise, you can do the same thing with images in CSS as well:
.div:before {
content: url('images/image.png');
padding-right: 5px;
position: absolute;
bottom: 10px;
left: 10px;
}
So again, the ability to place things before or after items is a great feature, but being able to position them is even more important. After all, whats the point of adding something through CSS without being able to position it properly?