HTML and CSS Reference
In-Depth Information
<h3>
<
a
href="/book/bookDisplay.html?bID=10079">
Building Flickr Applications with PHP
</a>
</h3>
it would render on the printed version like so:
Building Flickr Applications with PHP
(http://www.apress.com/book/bookDisplay.html?bID=10079)
■
Tip
You probably wouldn't want every link on the page to get this treatment, so you may want to scope it
by using a contextual selector, for example
#bodycontent a:after {content: " (" attr(href) ")
";}
.
Using JavaScript and the DOM to Write Out the URL
Because of the flaky support for this, you can turn to JavaScript and the Document Object
Model (DOM) to do the same thing. The following script accomplishes these goals:
•
Looks through the document and finds all links
Gets the
href
attribute from each link and adds it to a new
span
element that is created
on the fly
•
Adds the new
span
into the link
•
<script type="text/javascript">
function findLinks()
{
var el = document.getElementsByTagName("a");
for (i=0;i<el.length;i++)
{
href = el[i].getAttribute("href");
var newEl = document.createElement("span");
var newElText = document.createTextNode(" (" + href + ")");
newEl.appendChild(newElText);
el[i].appendChild(newEl);
}
}
window.onload=findLinks;
</script>
Without a bit of further intervention, this will render on screen as well as print, so you will
need to do a little more work on the CSS to prevent this:
