Print URL

Here is a way to show URLs after links when printing. This is handy when saving pages as a pdf.

Here is the CSS:


/* Add URL after link when printing */

a:after {
	content:"[URL: " attr(href) "] ";
	text-decoration: none;
	border: none;
}


/* Add image source information after image when printing */

a[href$=jpg],
a[href$=jpeg],
a[href$=jpe],
a[href$=png],
a[href$=gif] {
	white-space: pre;
}

a[href$=jpg]:after,
a[href$=jpeg]:after,
a[href$=jpe]:after,
a[href$=png]:after,
a[href$=gif]:after {
	content:" \A [Image location: " attr(href) "] ";
	text-decoration: none;
}

And here is the HTML:


<p>This is a normal link to <a href="https://pixabay.com/en/boy-dog-ocean-play-childhood-2354068/">a picture on Pixabay</a>.</p>

<p>This is a thumbnail that links to a larger image:</p>

<p><a href="images/boy-2354068_640.jpg"><img src="images/boy-2354068_150.jpg" /></a></p>

Example

You'll need to print preview to see this in action.

This is a normal link to a picture on Pixabay.

This is a thumbnail that links to a larger image:

Back to Index