A Better Way to Layer Type
I use the pseudo elements :before
and :after
to create layered type frequently on this site. In the case of this example, I repeat the title with CSS using something like content:"unitasking";
. It works, but as Brandon Durham points out, the redundant text presents potential problems for screen readers and SEO. In this video he proposes we use data attributes instead. Smart guy.
Update: 11/12/13
Web crusaders Eric Eggert and Chris Coyier point out in the comments that we may need to include an empty span within an element (like the h1 in the example) until speak:none;
gains more browser support. The helpful comments are here and here.