Ridding markup of textual decoration

On the Web it's not uncommon to see characters with no inherent meaning used for stylistic reasons. A good example is the Read more » link. Perhaps the directionality of the "»" is suggestive of travelling to another page, or perhaps the letterform is included solely for its aesthetic appeal. Whatever the case, one thing is certain: links do not require right-pointing double angle quotation marks in order to function.

The inclusion of such a character is therefore a design decision. It is decoration, not content. It belongs in a style sheet, not in a page's markup.

Adding decorative textual content via CSS

The content property is extremely powerful. It's used in conjunction with the :before and :after pseudo-elements.

<a class="more" href="/meaningful-markup/">Read more</a>

.more:after {
    content: " »";
}

There are many other situations in which :before/:after and content can team up to great effect. Often sites have footer links separated by "pipes". These pipes commonly appear in the site's markup. This is wrong! Last week I was horrified to discover that Bitbucket is guilty of this. I've since rectified the situation (although the change is yet to go live).

.footer-nav li {
    display: inline;
    list-type: none;
}
.footer-nav li+li:before {
    content: " | ";
}

The second selector above may look strange unless you're familiar with this approach. By using li+li we target every li inside .footer-nav except the first.

Another case in which there's a temptation to mark up content in a certain way in order to achieve a certain visual appearance is the comma-separated list.

<p><strong>Tags:</strong> Apple, iOS, iPad</p>

This approach is inflexible. Displaying the tags as Twitter-style hashtags, for example, would require fiddling with the markup. Adding a tag icon beside each tag would require rewriting the markup completely.

A better approach would be to let the content dictate the markup used. Since we have a list of tags, we should use a list of some sort. Since the list is in non-arbitrary order (alphabetical), an ordered list is probably appropriate. "Tags" is a heading that relates to the list of tags.

<h4>Tags</h4>
<ol>
    <li>Apple</li>
    <li>iOS</li>
    <li>iPad</li>
</ol>

It takes a bit of work to display this markup as a simple comma-separated list, but it gives us the freedom to dramatically alter the list's appearance without touching the markup.

h4, ol, li {
    display: inline;
}
h4:after {
    content: ":";
}
li:after {
    content: ",";
}
li:last-child:after {
    content: "";
}

Summary

When marking up content, one should use the elements which best describe that content. Styling content is a separate (though not unrelated) issue. With :before, :after, and content at our disposal, let us bid farewell to <span class="pipe">|</span> and friends.