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;
}
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)