html accessibility: anchor tags with background images on pseudo elements

My company is exploring some scenarios that we use commonly in our design that we are realizing may not be 100% compliant with WCAG 2.0 standards.

One such scenario is that we have anchor tags (social media links, for example) that have no content and a background image declared on a pseudo element.

The best alternatives I'm aware of are:

1. Use a title attribute on the link

2. Add text to the link wrapped in a span with a "screen reader only" class, such as this example from eBay Mind Patterns:

   .clipped {
     border: 0 !important;
     clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
     clip: rect(1px, 1px, 1px, 1px);
     height: 1px !important;
     overflow: hidden;
     padding: 0 !important;
     position: absolute !important;
     white-space: nowrap !important;
     width: 1px !important;
   }
   

And to be explicit, this is an example of the pseudo class background image styling we're using

.pseudo::after {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    background-image: url('images/pizza.png');
}

Any ideas which of these is more compliant?

Option 1: Title, no text inside

<a title="pizza title" href="http://pizza.com" class="pseudo pizza"></a>

Option 2: screen reader only text in the link

<a href="http://pizza.com" class="pseudo pizza">
    <span class="clipped">pizza text</span>
</a>