Страницы веб-сайта просматриваются посетителями не только в веб-браузере на экранах различных устройств, но иногда и отправляются на печать. Причём в большинстве случаев печать выполняется напрямую из окна веб-браузера, без дополнительного редактирования.

Если над веб-версиями страниц может вестись постоянная работа по улучшению представления и удобству работы с контентом в зависимости от типа устройства, на котором они просматриваются, то о бумажных копиях веб-страниц, как правило, забывают. Это приводит к тому, что напечатанная копия страницы неудобна для работы с ней, как с обычным бумажным документом.

Распространённым решением существующей проблемы является создание специальной версии веб-страницы, предназначенной для вывода в виде бумажного документа. Как правило, такая версия веб-страницы отличается вёрсткой, позволяющей наилучшим образом представить её контент в виде привычного пользователю документа.

Однако в отличие от HTML-документа, напечатанная страница не обладает интерактивностью, что потенциально приводит к потере важных составляющих частей контента. Так, при печати веб-страницы, все опубликованные на ней гиперссылки выводятся в виде анкоров, теряя URL-адреса, на которые они ссылаются. В ряде случаев такое представление информации является недопустимым.

Решить данную проблему можно с помощью приведённого фрагмента CSS-кода:

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

В результате, при выводе веб-страницы на печать, в квадратных скобках, после анкоров ссылок, автоматически добавляются URL-адреса, на которые они ссылаются.

Если, выводимая на печать веб-страница, содержит ссылки, URL-адреса которых не имеют практической значимости, то действие приведённого селектора CSS должно быть ограничено областью, включающей только основной контент страницы. Кроме того, выводимые URL-адреса могут быть дополнительно стилизованы.