Posted about 8 years ago. Visible to the public.

CSS: Set content from other attributes

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

Copy
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:

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

There also is a jsFiddle for the example above.

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

Copy
a:hover:after { content: attr(href); white-space: nowrap; position: absolute; background: #fff; z-index: 99; }

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
almost 4 years ago
by Michael Leimstädtner
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more