How to add an image automatically before text

On your WordPress Website, have you ever wanted a specific image to appear before text automatically. Fortunately this is really simple with some basic CSS. 

For example, when I Post from the WordPress for Android App, a line of text appears below the Post content with the words ‘Posted from WordPress for Android’:

But what if I want to add the Android logo (or any other image) before the line of text so that the ‘Posted from WordPress for Android’ now looks like that below?

Using :before CSS in WordPress

All we need do to show any image before a CSS element is use the :before pseudo-element (for CSS3 you’ll use the ::before pseudo-element). Here are the instructions:

1. Identify the CSS element (e.g. the class or ID).
2. Insert the following into your style.css using a text editor (substitute .class for your css element and add the link you your image required to show before the content): .class:before {
 content:url(http://example.com/wp−content/uploads/android−logo−2012.png);
padding−right:6px;
}
3. Save the changes to style.css

That’s all. Your image will now show wherever the element is shown on your Website.