This is a test paragraph. It should have a blue background when the total browser window width is more than 800px, and a red background when the browser window width is less than 400px. The "content after" will also show andresvidal.com's href in small screen sizes. It should also have a green border when the monitor you use has an aspect ratio of 16.9, but that feature doesn’t seem to work yet.
<style type="text/css"> p#test a {font-weight:bold;} @media screen and (min-width: 800px) { p#test { background-color: #6374AB; color: #ffffff; padding: 5px; } p#test a { color:white; font-weight:bold; } } @media all and (max-width: 400px) { p#test { background-color: #cc0000; color: #ffffff; } p#test a { color:white; font-weight:bold; } a:after { color:white; font-weight:bold; content: " (" attr(href) ")"; } } @media screen and (device-aspect-ratio: 16/10) { p#test { border: 5px solid #00cc00; } } </style> <p id="test">Some test paragraph and a <a href="#">link</a>... </p>