If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
CSS is one of the millennium greatest thing. CSS can help you doing amazing stuff like adding more effects to your layout, adding buttons, adding and adding. But when you are using HTML, JavaScript can be a single solution, but CSS can be a helpful hand and so other coding can be forgotten.
CSS - Link States
A link has 4 different states that it can be in. So with the help of CSS you are able to customize each and every one. The following keywords correspond to one specific state :
- active - a link that is being in the process to be clicked.
- visited - a link used before, but with no mouse on it.
- link - no used link, or no mouse hover on it.
- hover - a link that has a mouse pointer hover on it.
With CSS you can make more different looks to each states.
Pseudo-Classes in CSS
It can be different when is about CSS Links. When you need to modify the 4 states you will need to use the following CSS code :
CSS Code :
To define how the HTML element should appear, name the state with “pseudo class”, this is depending on which state it is. You have listed an example of “link”, - visited and hover- state. So, the way you want to work your CSS link, that’s the way you have to define them.
CSS Code :
HTML Code :
You have to define the correct order for the states. The order is this :
- link
- visited
- hover
- active
Default Underline - Removed
The following menu doesn’t have n underline, unless you’re hovering, meantime the content has. So, for removing the underline from specific states, use text-decoration: none.
CSS Code :
Pay attention when you are removing the underline from the links. This may cause the link to be indistinguishable from normal text. So,if you are making this underline out try and make something else for the link so it comes better out/stand out better.
An Examples :
Here are two CSS ways on how to change the states :
CSS Code :
