Skip to content

Instantly share code, notes, and snippets.

@cballenar

cballenar/data-print.css

Last active December 22, 2015 09:58
Show Gist options
  • Save cballenar/6455367 to your computer and use it in GitHub Desktop.
Save cballenar/6455367 to your computer and use it in GitHub Desktop.
Download ZIP
Adding the data-print attribute to an element, will print the value after the element. This addresses elements that may contain information you want to see only when printed. This is a variation of the HTML5Boilerplate's solution to links [https://github.com/h5bp/html5-boilerplate/blob/master/doc/css.md#print-styles] . Live example: http://jsbin…
Raw
data-print.css
@media print {
/* data-print="print-me"
* ==================================
* Adding the data-print attribute to an element, will print the value after the element.
* This addresses elements that may contain information you want to see only when printed.
*
* This is a variation of the HTML5Boilerplate's solution to links
* [https://github.com/h5bp/html5-boilerplate/blob/master/doc/css.md#print-styles]. */
*[data-print]:after {
content: " ("attr(data-print)")"; }
}
Raw
data-print.html
<!DOCTYPE html>
<html>
<head>
<title>data-print sample</title>
</head>
<body>
<h1>Just a title</h1>
<p>Lorem ipsum dolor sit amet, <span data-print="I only appear when printed.">imperdiet nulla ve</span>.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment