Design anchor tag visited link, select link, unvisited link, active link and link open in new tab

If we want to open the link in new tab then we have to use target="_blank" property in anchor tab. Below is the code.

HTML:

?

1 2 3

<div class="anchor-box"> <a href="http://see-coding.blogspot.com" target="_blank"><h3>Click to open the link</h3></a> </div>

CSS for anchor tag:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/* unvisited link */ .anchor-box a:link { color: green; }   /* visited link */ .anchor-box  a:visited { color: #776655; }   /* mouse over link */ .anchor-box a:hover { color: red; }   /* selected link */ .anchor-box a:active { color: yellow; }

Output:

Click to open the link in new tab

If we want to change text-decoration in anchot tag.

Default text-decoration comes text-decoration: underline; if you want to remove unaderline, we have to use text-decoration: none; is our css. Like below

?

1 2 3 4

.anchor-box a:link { color: green; text-decoration: none; }

If we want a line in over the link, then we can set as below

?

1 2 3 4 5

.anchor-box a:link { color: green; text-decoration: overline;   }

If we want to create link line-through, then we can change like-

?

1 2 3 4 5

.anchor-box a:link { color: green; text-decoration: line-through;   }

We can also change anchor tag background color;

?

1 2 3 4 5

.anchor-box a:link { background-color: red; color: #ffcc77; text-decoration: none; }

we can also change it font family

?

1 2 3 4 5 6

.anchor-box a:link { background-color: red; color: #ffcc77; text-decoration: none; font-family: Verdana; }