CODEWITHSUNDEEP
csszurb-foundation
Patrick Jones
Patrick Jones

Reputation: 1926

Zurb Foundation Print Styles - How to disable urls appearing next to anchors when printing?

When I print my page the actual URL appears next to every anchor tag, which looks really weird in breadcrumbs or footer links. What is the appropriate way to disable this behavior when using Zurb Foundation 5? Alternatively, if there is a CSS style I can use to override this behavior, that would also be great.

You can see the description of the behavior in their documentation here: http://foundation.zurb.com/docs/components/typography.html#print-styles

Upvotes: 5

Views: 1962

Answers (2)

Adam Elsodaney
Adam Elsodaney

Reputation: 7808

In the Type component of Zurb Foundation 5, the URLs are not shown for images or JavaScript internal links, or more accurately by looking at the source it resets the content to a empty string.

.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
  content: "";
}

So you could do the same for all links

a[href]:after {
    content: "";
}

Upvotes: 3

Todd
Todd

Reputation: 185

That is caused by pseudo elements being added to attribute selectors; probably something like this:

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

You can most likely override this by resetting the content of the pseudo element.

Try adding the following to a print stylesheet:

a[href*="/"]:after, a[href*="/"]:visited:after {content: normal;}

Upvotes: 5

Related Questions