Ben Sullivan

Founder at Ayrne
Artist, Traveler, and Lover of the Beauty of Life

If you’re one of the many people who have fallen in love with the way WIRED Magazine currently has their links styled, it’s not difficult at all to implement. In fact, it takes only two properties to accomplish this – box-shadow and background-color.

 

To style every single link (external and internal) you could use something like this:

 

/*----Wired Style Links----*/
a:link{
   text decoration: none;
   box-shadow: inset 0 -5px 0 0 #B4E7F8;
}
a:hover:link:{
background-color: #B4E7F8;
}

 

If you only want to style external links, you could use the CSS :not selector to exempt any link that points to your own domain:

 

/*----Wired Style Links----*/
a[href*="//"]:not([href*="yourwebsite.com"]){
   text decoration: none;
   box-shadow: inset 0 -5px 0 0 #B4E7F8;
}
a:hover[href*="//"]:not([href*="yourwebsite.com"]){
background-color: #B4E7F8;
}

 

You could also get more creative and add an internal link path to style. In this example , and internal URL that contains “/stylethis” (like http://mywebsite.com/stylethis or http://mywebsite.com/stylethis/sammich) will al have Wired link styling:

 

/*----Wired Style Links----*/
a[href*="/recommends"],
a[href*="//"]:not([href*="yourwebsite.com"]){
   text decoration: none;
   box-shadow: inset 0 -5px 0 0 #B4E7F8;
}
a:hover[href*="/recommends"],
a:hover[href*="//"]:not([href*="yourwebsite.com"]){
background-color: #B4E7F8;
}

Tags:

About the Author
Founder , Ayrne
I am an artist, traveler, and lover of the beauty of life
  • Show Comments (0)

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

Support our site

If you find this site helpful, please consider using our affiliate links. Ayrne may earn a small commission from your purchase, but it won’t cost you anything at all and in some cases, it may even save you money! We use affiliate links instead of banner ads to provide you with a cleaner, more focused experience on our website.