Есть ли способ отображать ссылки как сноски в печатных СМИ?
Я знаю, что вы можете поместите URL-адреса ссылок сразу после самой ссылки, но есть ли способ сделать это внизу страницы?
Если у меня есть страница, которая выглядит так:
<p>Check <a href = "http://example.com">here</a> and <a href = "http://example.net">here</a> for more information.</p>
Я могу использовать приведенный выше трюк с CSS, чтобы версия для печати выглядела так:
Check here (http://example.com) and here (http://example.net) for more information.
Есть ли способ сделать так, чтобы это выглядело вместо этого?
Check here[1] and here[2] for more information.
[1] http://example.com
[2] http://example.net
@roymckrank Оба они фактически используют тот же трюк, который я указал в вопросе, который помещает URL-адрес непосредственно рядом со ссылкой. Я надеялся получить что-нибудь, что вместо этого поместит их в конец страницы.
Я могу пронумеровать их, используя комбинацию этого трюка и счетчики css; просто нужно получить ссылки в самый низ.
Ответы 1
Я лично так бы и поступил.
Сначала создайте скрытый элемент ul внизу с я бы.
<ul id = "footnotes"></ul>
CSS
#footnotes {
list-style: none;
position: fixed;
bottom: 0;
display: none;
}
Затем вручную присвойте всем элементам a на странице индекс.
<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>
Затем покажите элемент сносок в режиме печати и прикрепите его индекс сзади.
@media print {
a:after {
content: "["attr(data-index)"]";
}
#footnotes {
display: block;
}
}
Теперь выполните итерацию в JavaScript по всем элементам a на странице и покажите ссылку для каждого индекса.
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);
}
Спасибо! Я знаю, что могу сделать это с помощью javascript; просто пытаюсь понять, смогу ли я сделать это с помощью простого CSS.
Я думаю, это невозможно без JavaScript.
Вы можете добавить таблицу стилей печати, в которой вы можете отображать / скрывать / изменять содержимое, как обычно при работе с медиа-запросами. См. css-tricks.com/css-tricks-finally-gets-a-print-stylesheet и этот davidwalsh.name/…. Я думаю, что статья Дэвида Уолша касается того, чего вы хотите достичь.