Адрес ссылки при печати: дополнение текста через attr()
Бумажная копия не сохраняет возможность нажать на ссылку. В печатных стилях можно добавить адрес после понятного названия, чтобы читатель смог найти источник позже.
Назначение
Бумажная копия не сохраняет возможность нажать на ссылку. В печатных стилях можно добавить адрес после понятного названия, чтобы читатель смог найти источник позже.
Как это работает
Псевдоэлемент after выводит значение href через attr внутри @media print. Селектор в примере ограничен абсолютными HTTPS-ссылками; якоря текущей страницы не превращаются в шумные подписи.
Пример
<style>@media print{.print-article a[href^="https://"]::after{content:" (" attr(href) ")";font-size:.85em;overflow-wrap:anywhere}.print-article a{color:inherit;text-decoration:underline}}</style>
<article class="print-article"><h2>Документация к проекту</h2><p>Источник: <a href="https://example.org/docs/">учебная документация</a>.</p><p><a href="#notes">Примечания на этой странице</a></p><h3 id="notes">Примечания</h3><p>example.org — демонстрационный адрес.</p></article>Что должно получиться
На экране остаётся обычная ссылка. В предварительном просмотре печати после неё появляется полный HTTPS-адрес; локальный якорь не получает дополнительного текста.
Граница применения и частая ошибка
Не выводите без проверки приватные ссылки и URL с токенами: они попадут на бумагу или в PDF. Очень длинные адреса ухудшают вёрстку. Печатное дополнение не заменяет понятный текст самой ссылки в доступном интерфейсе.
Самостоятельная проверка
Перенесите пример в отдельную страницу и откройте предварительный просмотр печати. Проверьте длинный адрес, переносы и отсутствие пустых листов. Во встроенной песочнице режим печати внешнего документа не демонстрируется.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.