CSS Property: content

Though I’ve heard that CSS can insert content to avoid repetitive typing, I had not put this technique to use. Until today. While updating our state museum’s Press Releases and Artist Opportunities pages this morning, I found this property came in handy for two uses:

  • displaying URLs when a user wants to print a webpage with links
  • adding a clear notation that declares the link s/he is clicking is a PDF

Displaying URLs in Print

When adding a link within a paragraph or list, best practice toward screen readers users is to offer a clear title and avoid having the link repeated to those users. However, what about users who want to print our webpage? The “content” property saves the day in this situation. I added this bit of code inside my global print stylesheet to allow print-off users to see what URL we are directing them to:

/* display address after link */
a::after{
    content: " [ "attr(href)" ]";
    color:#000;
    font-size:11pt;
    font-style:italic;
}

Print preview results show just what I want to see:

URLs appear after links under Sheldon Jackson section

Concatenating with CSS

Another time-saving use of the content property was adding “[PDF]” to the end of all my links. To add this bit of text to all of our PDF links, I added this bit of code to the main stylesheet to target any link that ended in “.pdf”:

/* accessibility feature: adds [PDF] to documents of pdf format */
a[href$=".pdf"]:after{
    content:" [PDF]";
}

Now “[PDF]” appears after each hyperlinked PDF file within the Museum’s website:

[PDF] text appears after each link

A skilled coder can put to practice the mantra of “don’t repeat yourself”. And this CSS property is one of the better tools to accomplish the D.R.Y. strategy.

Advertisements

One Reply to “CSS Property: content”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s