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;
}
Posted by Arne Hartherz to makandra dev (2013-02-07 14:49)