CSS offers a tempting attribute in the content property. The syntax is as follows:
content: 'Add this.';
The code above will append “Add this.” to the element, id or class of our CSS declaration. The problem with this is that we’re putting content into our presentation code. Also, this content is not accessible by screen readers or search engine crawlers. A good rule of thumb is to use this property as a means of progressive enhancement. Generally speaking, I like to use it for presentation that enhances the site, but contributes nothing semantically.
Here’s an example:
Let’s say we want to use this icon to denote links that are external to our site:
Use the content property:
a.external:after {
content: url(path/to/external.png);
}
The image itself provides no semantic value to the document. It’s merely an enhancement and would be ignored by screen readers anyway. We can safely use content in this case. Another good use is this tutorial for creating CSS-only arrows.
Similar Posts:
- When to Use CSS content Property
- Media Queries for High Pixel-density Devices
- Using Impress.js
- HuffPost Applies AB Testing to Headlines via (@bigboxcar via @mjkeliher)
- One Site
Tags: css, web development