Keep Coding

How can I use content with :before to create an icon that also acts as a link to a page?
For example, I currently have:
.basketBtn a:before
{
content:url('/images/mobile/basketIcon.png');
position:absolute;
left:9px;
top:9px;
}
Now need to make the image basketIcon clickable, but this does not work:
.basketBtn a:before {
content:url('/images/mobile/basketIcon.png');
position:absolute;
left:9px;
top:9px;
}

As defined by the spec, content only generates textual content and doesn't process HTML. This makes sense, as you wouldn't want CSS to generate HTML, would you?
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).
Use CSS for what it is made for, presentation.
However, in your specific case I don't see too much of a problem, as the ::before pseudo-element creates an element that is the first child of the parent element. This means that, if you assign the correct href to your parent anchor, also your ::before element should be perfectly clickable, whether it is absolutely positioned or not.
Working demo