Print stylesheet

From CSS Standards FAQ

Jump to: navigation, search
  • Note that the following only works in CSS3 (which is currently a candidate for a recommendation)

(This can be a lengthy topic but we have to start somewhere...)

If you wish to display the value of an href for print try the following:

Internal link anchors:

<a href="#foo">About Foo</a>
a:not([href^="#"]):after {
    content:attr(href);
}

as it finds all the href values that do not begin with the `#` character.


For absolute URLs, we can simply do the following:

a[href]:after {
    content:attr(href);
}


However, concerning relative URLs on the site:

<a href="foo">About Foo</a>

We apply the following CSS:

a:not([href^="http:"]):after {
    content: " ( http://www.foo.bar/"attr(href)" ) ";
}

This will apply the site URL to hrefs that do not begin with 'http'.

It will then look something like this:

Foo's site ( http://www.foo.bar/foo )

If the site uses leading slashes in the hrefs, then the leading slash can be removed from the above content property value.

If you have other schemes like irc: or ftp: then apply:

a[href^="irc:"]:after, 
a[href^="ftp:"]:after { 
    content:" ( "attr(href)" ) ";
}


Further reading

Personal tools