Everyone wants higher CTR on their landing pages. This is why some of the forums are filled with people looking for high CTR landing pages, but innovation is at its minimum. People find copying easier and the ones who do not copy and create their own work lead the way. I did my own research and found that using after elements on links resulted in higher CTR ratio throughout my entire money making sites. Now lets move on the part where I teach you how to use CSS :after pseudo-element :)
CSS :after and :before pseudo-elements are not used very widely. I have used them in my latest blog theme, Ali Nazik, just to make it stand out. But they are not just eye-candy. If used on a link, a small image can increase your CTR no matter what. In my situation, I got a whooping %20 increase in CTR on my money making websites where I reached my highest earning from the Internet. After a while, its the small things like this that separate you from the crowd.
Here is how to use it:
a:link:after {
content: url(external.gif)
}
This code enters “external.gif” after the link giving the look you can see on the top image. If your image has no whitespace, you may add a whitespace on the content part to have a little space between the link and the image:
a:link:after {
content: ” ” url(external.gif)
}
I highly suggest using of css :after elements on blogs with affiliate links such as John Chow (a little bit overkill), Shoemoney and Courtney Tuttle. I ‘ll add John Cow, just for the fun :)
I also made a zip file containing 10 small pixel images that you can use with your css :after elements. They are all freeware and some of them are designed by me. They are fairly easy to do. Click the image below to download:
RSS
Twitter
Nice. I'll give this a try…I was totally unaware of that little CSS gem. Stumbled, Dugg, Zoomed and added you to my Reader feed!
Thanks alot for the dugg. Let me know if you incorporate this on your site.
Could be done with something along the lines of background:url(yourpic) right;padding-right:16px;, supported better by more browsers that way i believe.
Nice idea and I am pretty sure it will increase the click through, but those pseudo elements are still not supported by IE. So, this approach will not be seen by roughly 50% of the site visitors.
Good idea though. Thanks.
I dont really see whats the buzz is about. The idea behind the article is interesting. But I would like to see the real research will it raise the CTR.
And realization is pathetic why would anyone use :after pseudo-element for sach a case – it is not supported by either version of IE. And the same effect can be achived easily by just assigning
background:url(external.gif)right center
margin-right: 8px
Anyone disagree?
The :after pseudo-class is usefull for other tasks too, as the float clearing trick: vault7.com/blog/css-clearing-floats
Great idea. I have been wanting to do this earlier and I found this by chance.
Just one Q though: Do you need to have assign any ‘padding’ just before the image?
Yan