Skip to content

Latest commit

 

History

History
28 lines (22 loc) · 672 Bytes

display-links-in-the-print-mode.mdx

File metadata and controls

28 lines (22 loc) · 672 Bytes
category created tags title
Tip
2021-03-25
CSS
Display links in the print mode

When users print a web page, they will not see the actual links. It would be more useful if a link displays both the text and its link.

We can do it by including the link in the :after element:

@media print {
    a::after {
        content: ' (' attr(href) ') ';
    }
}

In the print mode, users will see the link included right after its content:

<!-- Normal mode -->
<a href="https://phuoc.ng/collection/tips">Front-End Tips</a>

<!-- Print mode -->
<a href="https://phuoc.ng/collection/tips">Front-End Tips (https://phuoc.ng/collection/tips)</a>