CSS3 Media Queries - Apply Two Styles to Links

In this example, we will use two styles for the widest viewports, just by appending another line of code to the line that has the option we want to add to our list of emails when the browser window is more than 1200 pixels wide:

HTML file: Displayed by browser:
<style>
ul {
    list-style-type: none;
}
ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}
@media screen and (max-width: 699px) and (min-width: 500px), (min-width: 1200px) {
    ul li a {
       padding-left: 30px;
       background: url(../html_beg/images/email.png) left center no-repeat;
    }
}
@media screen and (max-width: 900px) and (min-width: 700px) {
    ul li a:before {
       content: "Email: ";
       font-style: italic;
       color: #666666;
    }
}
@media screen and (min-width: 901px) {
    ul li a:after {
       content: " (" attr(data-email) ")";
       font-size: 12px;
       font-style: italic;
       color: #666666;
    }
}
</style>
<body>
<h1>Resize the browser window to see the effect!</h1>
<ul>
  <li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li>
  <li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li>
</ul>
</body>

Resize the browser window to see the effect!

Back button Table of Contents Next button