Link with pseudo attribute is not clickable on mobile browser (Samsung Galaxy S3)

Samsung Galaxy SIII

The Samsung Galaxy S3 and S3 Mini’s browser (and possibly other devices as well) produce a strange issue that causes links not to be clickable if the text of the link is set using pseudo attributes. Here is some sample code that can produce this issue.

The HTML:

<a class="link" href="http://www.google.com" data-collapsed="Expand" data-expanded="Collapse"></a>
The CSS:
.link:after {
    display: inline;
    content: attr(data-collapsed);
}

.link.expanded:after {
    display: inline;
    content: attr(data-expanded);
}

In this example, by default the link’s text will be Collapse, but if the expanded class is added to the link, it’s text changes to Expand.

However, this does not work correctly on Samsung Galaxy S3 and S3 Mini. The text of the link is displayed correctly in both cases, but it is not clickable.

To solve this issue you need a strange workaround. Set the background color of the link. It can be invisible if you don’t really want a background, but the background must be set.

.link {
    background: transparent url("") no-repeat;
}