In this post I'm going to show you how to stylize Twitter links with CSS. Twitter links are usually in the form @profilename, and this poses some accessibility problems because of the presence of the at symbol, which is not part of the actual content of the link itself. Let's start with a basic page that contains two Twitter links inside an unordered list. Here are the CSS styles:
body {
background: #008eb9;
color: #333;
margin: 0;
padding: 2em 0;
font: 76% Verdana, sans-serif;
}
#twitter-profiles {
width: 50%;
margin: 0 auto;
padding: 1em;
list-style: none;
background: #fff;
font-size: 1.2em;
}
#twitter-profiles li {
height: 3.5em;
margin-bottom: 0.5em;
padding-left: 3.6em;
background: url(twitter-links/twitter.png) no-repeat 0 0;
}
#twitter-profiles li:hover {
background: url(twitter-links/twitter-hover.png) no-repeat 0 0;
}
#twitter-profiles li a {
color: #008eb9;
text-decoration: none;
display: block;
height: 100%;
line-height: 3.5;
text-transform: lowercase;
word-spacing: -0.3em;
}
#twitter-profiles li a:before {
content: '\0040';
}
Our Twitter links have been turned into block-level elements. The spacing between words has been zeroed, so that we can handle links that contain multiple words, thus making them appear as standard Twitter links (no spaces). Finally, we've used generated content to insert the at symbol just before the actual content of each link. By doing so, accessibility is no longer a problem. You can see this demo here.