Is there a way to display links as footnotes in print media?

user_128217 0
Viewed 130

I know you can put link URLs directly after the link itself, but is there a way to do that at the bottom of the page instead?

If I have a page that looks like this:

<p>Check <a href="http://example.com">here</a> and <a href="http://example.net">here</a> for more information.</p>

I can use the CSS trick above to make the print version look like this:

Check here (http://example.com) and here (http://example.net) for more information.

Is there a way to make it look like this instead?

Check here[1] and here[2] for more information.

[1] http://example.com
[2] http://example.net
css
2 Answers

If you know the number of links you could achieve what you want. Let's assume there are three links in your section.

section {
  counter-reset: links;
  position: relative;
  padding-bottom: 4em;
}

section a {
  counter-increment: links;
}

section a::after {
  content: "["counter(links)"]";
}

section a::before {
  content: " ["counter(links)"] "attr(href);
  position: absolute;
  left: 0;
}
    
section a:nth-of-type(1)::before {
  bottom: 2em;
}

section a:nth-of-type(2)::before {
  bottom: 1em;
}

section a:nth-of-type(3)::before {
  bottom: 0em;
}
<section>
  <a href="first.htm">Here's</a> your <a href="second.htm">text</a> containing <a href="third.htm">three links</a>.
</section>

Note: In long texts on multiple pages you may get unexpected results. But you could devide your text in multiple sections. And of course your css code increases with every new link...

user_137205530

I personally would do it this way.

First create a hidden ul element at the bottom with an id.

<ul id="footnotes"></ul>

CSS

#footnotes {
    list-style: none;
    position: fixed;
    bottom: 0;
    display: none;
}

Then give all a elements on the page an index manually.

<a href="https://google.com" data-index="1">My link</a>
<a href="https://amazon.com" data-index="2">My link</a>
<a href="https://spotify.com" data-index="3">My link</a>

Then show the footnotes element in print mode and attach its index behind.

@media print {
    a:after {
        content: "["attr(data-index)"]";
    }

    #footnotes {
        display: block;
    }
}

Now iterate in JavaScript through all a elements on the page and show the link for each index.

const footNotes = document.getElementById('footnotes');
const links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    var li = document.createElement('li');
    li.innerHTML = '[' + links[i].getAttribute('data-index') + '] ' + links[i].getAttribute('href');

    footNotes.appendChild(li);
}
user_49820970
Related