CSS For Links (Anchor) Element

While developing a website, surely we’ll often use links as it would be everywhere in our website (in menu, post, sidebar, etc…), sometimes we have surely written down the style correctly, but when testing it in a browser, it doesn’t work as expected, it must be something wrong there, so, today we’ll discuss about how to write css for links properly.

Link Element

People may probably guess what is link actually is? refers to CSS Specification, links are all HTML elements that have href attribute, to date, there are three elements that allowed to use href attribute: <a>, <area> and <link> – which placed in the header element for defining stylesheet-, from those three elements, only <a> element that can be styled, so in this tutorial we’ll use the term of link for anchor (<a>) element.

1. :link Pseudo Class

:link pseudo class will match all link elements that have not yet been visited (:visited),  as stated before, only anchor element that can be styled, so writing :link{} is the same as writing a:link{}a[href]{}, [href]{} (match any elements that have a href attribute, with any value) or just simply a{}. , all of these will only match to the anchor element.

2. :visited Pseudo Class

:visited pseudo-class active when a user has visited the url/link, it is to facilitate the user to distinguish the links that have been visited (clicked) and unvisited. For security reasons, as explained by Mozilla at Privacy_and_the_: visited_selector page, only a few properties that are allowed to be used:

properties that are defined in this selector can work properly if it also defined in the :link pseudo-class, for example: we may want to change the color of visited links to red by defining color:red in the :visited class, then the color will be changed if the :link selector also defined that color properties (color:red).

3. :hover Pseudo Class

:hover pseudo-class actives when the mouse is over the element. This class can be used on all html elements, but for IE 6 and earlier, this pseudo-class can be used only on anchor element. This pseudo-class is usually used to create a drop-down menu that is usually applied to the <li> elements.

4. :active Pseudo Class

:active pseudo-class actives when targeted elements are activated, in the case of links, it occurs when the links are being clicked, (the mouse is being pressed-not yet released-), and usually only visible at a glance. The following example will make the button down to below five pixels when clicked, that will give an impression of a 3D effect.
Push me!

5. :focus Pseudo Class

:focus pseudo-class actives when the link receives a focus, this usually achieves when we use tab key on the keyboard to switch from one element to others, and when it comes to the link, then the :focus pseudo-class will be activated. This is somewhat needed in order to improve the user experiences while visiting your website. For instance, point your cursor on the input box below, then press tab key on your keyboard, further, the focus will shift to the link bellow the input box.

6. Some Rules to be Followed

In order to work properly, all above pseudo-classes must be written in the specific order:

  • :link and :visited pseudo-class should be written on the top of other pseudo-classes.
  • :hover pseudo-class should come after :link and :visited
  • :active pseudo-class should come after :hover pseudo-class.
  • :focus pseudo-class should come before :active pseudo class.

Sample of CSS:

a:link {
	color: blue;
	text-decoration: none;
}
a:visited {
	color: blue;
}
a:focus {
	color: #CCCCCC;
}
a:hover {
	color: red;
}
a:active {
	color: green;
}

It is because all the above selectors have the same priority (see: specificity), so that if a:link comes out last, it will overwrite (override) all style above, therefore, always pay attention to the order of these pseudo-classes. to simplify this and in order to remember easily, there is a phonetic out there: LoVe-HAte (Link Visited Hover Active) or LVHA (without :focus, because rarely used), then just add :focus to the middle.

Some considerations: 

In order to improve the usability and accessibility of a website, sometimes we need to make our links distinguishable by some mean other than color. The reason is people with some visual impairments  (eg: color blindness) find it difficult to distinguish the difference between the colors, in this case plain text or links. To achieve it, we -for example- may want to make all the links bolded.

Some examples of css for links

Example 1: CSS for simple text links – playing with underline

The common use of styling links is to remove the underline or to change the color, Some designer doesn’t like to add underline to link because it can cause some visual clutter to a page, if you do so, you could make the links bolded or bottom bordered instead. The following examples show the various possible alternative when displaying the links, try to hover it to see the differences.

HTML

<ul class="simple-links">
	<li><a class="simple-link1" href="#">Sample Link 1 (with no underline and border)</a></li>
	<li><a class="simple-link2" href="#">Simple Link 2 (with underline on hover)</a></li>
	<li><a class="simple-link3" href="#">Sample Link 3 (with border-bottom on hover)</a></li>
	<li><a class="simple-link4" href="#">Sample Link 4 (with border-bottom)</a></li>
	<li><a class="simple-link5" href="#">Sample Link 5 (bolded link)</a></li>
</ul>

CSS

.simple-links a,
.simple-links a:visited {
	color: #6565FF;
	border: 0;
	transition: all .3s;
}
.simple-links a:hover {
	color: red;
}
.simple-links a:active {
	color: orange;
}
.simple-link1 {
	text-decoration: none;
}
.simple-link2:hover {
	text-decoration: underline;
}
.simple-link3:hover {
	border-bottom: 1px dotted #CCCCCC;
}
.simple-link4 {
	border-bottom: 1px dotted #CCCCCC;
}
.simple-link5 {
	font-weight: bold;
}

Result:

Example 2: CSS to add icon to links

To enhance the user experience, sometimes we need to differentiate between internal and external links, so, visitors can decide whether to click it or not, to do so, some website add a small icon to their links which indicate that it will take the visitor to another website, for instance, Wikipedia website.

wikipedia_links

Adding icon to links can be done easily by adding a class to any external links, then apply some background image to it, for instance:

.external-link {
	background: url(external_link_icon.png);
}

Although this method works properly, it’s not the elegant way of doing things, as we should add to every single external link, later, when we decide to change to another method we have to change tons of our external links that have been written, it could be messy. The best solution to date is to use attribute selector delivered by CSS 3, it will match elements which have attribute’s value containing your chosen text, now we’ll search all links that begin with http:// then add some style to it.

a[href^="http://"] {
	border-bottom: 1px dashed #CCCCCC;
}

So now we can style our external links properly, however, it also match our internal links that use absolute url,  we need to exclude it, this is done by using :not() pseudo-class, like so:

a:not([href^="http://webdevzoom.com"]):not([href^="http://www.webdevcorner.com"]):after {
	font-family: 'icomoon' !important;
	content: "\f17d";
	margin-left: 5px;
}

In the above example, suppose our internal link is http://webdevzoom.com, we also include the www version to make sure everything will be alright. The finished example as shown bellow:

Example 3: CSS for button links

While browsing websites, We often find links that appear as buttons or in boxed state such as navigation menu both vertical and horizontal, this is done by set the display of anchor element to inline-block or just block, here is some example:

Sample buttons:

CSS

.button-link a:link {
	text-decoration: none;
    display: inline-block;
    background-color: #237DC3;
    color: #FFFFFF;
    padding: 10px 25px;
    transition: background .3s;
	border: 0;
}
.button-link a:visited {
	color: #FFFFFF;
}
.button-link a:hover {
	background-color: #2F93D8;
}

Sample menu:

Example 4: CSS for social media link button

Another example is creating social media buttons which can make your website more beautiful, same as the previous example, to do this, we set the display of anchor element to inline-block, but this little bit interesting as we much play with pseudo elements ::before and ::after, here is the example:

This example is taken from the article: Creating 13 Social Media Button With Cool Effect, the css code takes a lot of lines, so please refer to that page to see the CSS code.

Conclusion

The use of links is necessary as it would be placed everywhere on our website and can be styled to many form as we want (text, button, boxed, etc…), so it is important to understanding this element with css style according to it, is important in order to work as expected.

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social