CSS ‘content’ attribute

This is a new one, and pretty cool.  The ‘content’ attribute automatically adds code / text / attributes to the start or end of any tag, depending on the pseudo class.

For example:


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

a.external:after{
  content: "(Link opens in a new window)";
}

a.pdf:before {
  content: "";
}

  1. Would automatically add the content of the ‘href’ attribute of the link code to the end (because we used ‘:after’) of the link text.
  2. Would automatically add the quoted text to the end of the link text. See how this is applied to a ‘class’ of ‘external’.
  3. This one adds an icon to the beginning of the link text, and is controlled by the ‘class’. Imagine having classes for each type of document link…..

Web 2.0? Nah, this is CSS3!