Adding Content Before & After HTML Tags using CSS

Using css2 we can add content before or after any HTML elements. This gives us control over the dynamically generated content.

Suppose, some HTML contents are coming through widget, And we do not have any control over them. Then, we can either use server side scripting language to get the HTML and modify those content. This provides us much power. But sometimes it can happen that we cannot use server side script. or getting all the data on server side is not efficient or desired in situation. In this case, pseudo-elements :bofore and :after can be very useful for adding content before or after those html elements.


Example:1.
<style>
blog-post:after
{
content:url(./anImageFilePath.gif);
}
</style>
2.
This example is from the <a href="http://satya61229.blogspot.com/">this blog</a>. I have used this for adding '-' before each postings in 'Recent Postings' widget.
<style>
.feedburnerFeedBlock .headline:before {content:"- "}
</style>

There was no start symbol coming and long post title was rolling over next line. In this situation, recognizing each new post line was not easy.
Pseudo-elements ':before' has worked for me.

For content inside :after and :before with special characters like ampersand etc, you need to find some other way. Suppose you want to put character "Broken Vertical Bar" inside using ¦, but it wont work due to ampersand. So, we need to put escaped Hexadecimal character. For that we use content:"\A6"; instead of content:"&#xA6";. Character codes are here.