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:
- Identify the CSS element (e.g. the class or ID).
- 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(https://example.com/wp−content/uploads/android−logo−2012.png);
padding−right:6px;
} - Save the changes to style.css
That’s all. Your image will now show wherever the element is shown on your Website.
Leave a Reply