Предварительный просмотр печати CSS - показать URL изображения / ссылки

Question

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

Для простых ссылок я нашел это решение:

http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url

a:link:after, a:visited:after { content:" [" attr(href) "] "; }

И это работает.Но для ссылок на изображения это «плавает» текст из свойства содержимого рядом с изображением, и весь макет портится ...

Так есть ли способ отобразить текст URL над изображением, вверхний левый угол?Или, может быть, под изображением ...

Answer 1

Это действительно зависит от макета вашего сайта. Например, если вы установите display:block на изображения и содержание :after, ссылка будет отображаться под изображением. Конечно, это может нарушить ваш макет.

Я подозреваю, что вы можете использовать множество различных объявлений для определенных областей. Поскольку вы можете применить практически любой стиль к добавленному URL (включая позиционирование), вы должны иметь возможность решать это в каждом конкретном случае.

Если вам нужна помощь с конкретными изображениями / областями, пожалуйста, опубликуйте пример или изображение, чтобы помочь нам в этом!

HTH:)