You could use attribute selectors to filter out mailto: links by using a regular expression that matches href starting with http – see https://css-tricks.com/attribute-selectors/ This would include links with the https protocol too.
Something like the following but add in the :after at the correct place.
@media print{
a[href^="http"] { /* do stuff */ }
}
It is generally useful to give those links which you want displayed in this way a class — I usually call it .external — so that mailto: links and internal links (href="#foo") don’t display in print.
BTW you should not insert any whitespace after the closing paren. What if it comes right before a punctuation character!?
Randomly: if, for whatever reason, you’re using links (with an appropriate ARIA role attribute) to act as buttons or whatever, you may want to exclude those from having their href printed as well…something like
Is there a way to force the entire URL to show? For instance, I am hiding all links in the navigation except for the one with a “current” class, and showing the URL next to it as sort of a Breadcrumb in the print version of a page. I get Page title (/about-us) but would like to see Page title (https://site.com/about-us). Is that possible?
Simply amazing. A great tut would be all about Print stylesheets! Thanks Chris!
Well, Chris already has a video tutorial on print stylesheets that’s quite good.
A demo would have been a lot much handy here !
Demo http://www.cssdesk.com/tZ6LY
Demo can be found here:
http://jsfiddle.net/duemF/
It’s also possible to turn the link black by adding color: #000, but text-decoration: none; doesn’t seem to work.
If you’re curious about browser support see the CSS tricks entries for
Pseudo elements (:after)
and
CSS content property
Don’t suppose anyone knows a nice method of doing this but excluding > “mailto:” from select links?
You could use attribute selectors to filter out mailto: links by using a regular expression that matches href starting with http – see https://css-tricks.com/attribute-selectors/ This would include links with the https protocol too.
Something like the following but add in the :after at the correct place.
It is generally useful to give those links which you want displayed in this way a class — I usually call it
.external— so thatmailto:links and internal links (href="#foo") don’t display in print.BTW you should not insert any whitespace after the closing paren. What if it comes right before a punctuation character!?
Randomly: if, for whatever reason, you’re using links (with an appropriate ARIA role attribute) to act as buttons or whatever, you may want to exclude those from having their href printed as well…something like
a[href]:not([role]):after,
a[href][role=”link”]:after { content:” (” attr(href) “) “; }
Awesome. Exactly what I was looking for and I found it on one of my fav sites.
This is genius!
Is there a way to force the entire URL to show? For instance, I am hiding all links in the navigation except for the one with a “current” class, and showing the URL next to it as sort of a Breadcrumb in the print version of a page. I get
Page title (/about-us)but would like to seePage title (https://site.com/about-us). Is that possible?You could add the TLD to the
contentproperty:That will only work as long the domain is consistent everywhere, of course.