CSS: Set content from other attributes

Updated . Posted . Visible to the public.

You can use the content CSS attribute to set an element's content -- which is especially useful for the :before and :after pseudo elements:

a:before {
  content: 'Click me: ';
}

The above example would prepend "Click me:" to any link on the page.

Note that you can also refer the contents of other attributes of the element. So, if your links have a helpful title set, you could do this:

a:before {
  content: attr(title) ": ";
}

There also is a jsFiddle Show archive.org snapshot for the example above.

As a bonus, here is a (hacky) snippet that shows the URL of each link when hovering:

a:hover:after {
  content: attr(href);
  white-space: nowrap;
  position: absolute;
  background: #fff;
  z-index: 99;
}
Profile picture of Arne Hartherz
Arne Hartherz
Last edit
Michael Leimstädtner
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2013-02-07 14:49)