CSS after/content

I learnt some mega useful CSS today, which I feel like I should have known already.

I found this out from a Treehouse video, talking about print styles sheets. Treehouse is an excellent website full of useful and well produced video tutorials covering a wide range of development, design and computing topics, including Graphic Design, HTML, iOS Coding, Ruby and lots, lots more.

The particular video I was watching was about best practices in print style sheets for websites. Using the combination of the :after psuedo-element and content property, you can get your stylesheet to show the full URL of a link when printing out a document.

So taking the following link, which will just appear like this: Best site ever

Best site ever

… you can then apply CSS like the following to produce this:

a:after {
content: "
" attr(href);

Best site ever


There’s also the “before” psuedo-element, which obviously does similar things to after.

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