Useful CSS Snippets - Anchors

Here is some handy CSS code that I'm sure you'll put to good use.

While I'd love to take credit for all of these snippets I didn't actually come up with them; necessity lead me to them elsewhere on the web and I just can't remember whom I should give credit to...

Useful CSS Snippets: Anchors

The anchor <a> tag is pretty important to the web community and so is the ability to unload as much burden from your server side code as possible. The CSS code below will help you apply some minimal logic and possibly some cool effects to your page's links and anchors.

INSTRUCTIONS: Copy the CSS and the HTML code below into your .css and .html files, respectively.

a:hover

I use this all the time but assuredly forget it just as often. (I'll just add "mouseover" and "highlight" for the search engines....)
CSS:
a:hover {
    border: thin solid red;
}
/* Don't forget these! */
a:active {
    color:lightgrey;
}
a:visited {
    color:grey;
}
a:link {
    color:silver;
}


HTML:
<a href="http://www.google.com/someMadeUp.jpeg">http://www.google.com/someMadeUp.jpeg</a>
<a href="http://www.google.com/someMadeUp.jpg">http://www.google.com/someMadeUp.jpg</a>

a[title]

Put a title attribute (aka attributes selector) in your HTML and the following link will be displayed as pink:
CSS:
a[title]{
 color: pink;   
}

HTML:
<a href="#" title="My Test Title">This is my pink test title link.</a>


a[href$=".png"]

Here's a little regEx goodness - use the "$" to refer to the end of the string in the search. So let's say you want to apply some green to all .jpeg image file links:
CSS:
a[href$=".jpeg"]{
 color: green;   
}

HTML:
<a href="http://www.google.com/someMadeUp.jpeg">http://www.google.com/someMadeUp.jpeg</a>
<a href="http://www.google.com/someMadeUp.jpg">http://www.google.com/someMadeUp.jpg</a>


a[data-filetype="image"] and the HTML data attribute

Sort of like the snippet above, but you can add 'data-filetype="image"' to the anchor tag and gain CSS level control to all of your image links.
CSS:
a[data-filetype="image"]{
 font-size: 32px;   
}

HTML:
<a href="http://www.google.com/someMadeUp.jpeg" data-filetype="image">http://www.google.com/someMadeUp.jpeg</a>
<a href="http://www.google.com/someMadeUp.jpg" data-filetype="image">http://www.google.com/someMadeUp.jpg</a>
<a href="http://www.google.com/someMadeUp.gif" data-filetype="image">http://www.google.com/someMadeUp.gif</a>
<a href="http://www.google.com/someMadeUp.png" data-filetype="image">http://www.google.com/someMadeUp.png</a>


Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/css/useful-css-snippets-anchors/
Copyright 2018. All Rights Reserved.