Posts in current category

CSS Links (link)


May 03, 2021 21:00 CSS


Table of contents


CSS link


Different links can have different styles.


Link style

Linked styles can be used with any CSS property (e.g. color, font, background, etc.).

Special links can have different styles, depending on what state they are in.

The four link states are:

  • a:link - Normal, unresoled links
  • a:visited - a link that the user has visited
  • a:hover - When the user mouses on the link
  • a:active - the moment the link was clicked
a:link {color:#FF0000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Try it out . . .

When styled to several link states, there are also some sequential rules:

  • a:hover must follow a:link and a:visited
  • a:active must follow a:hover

Tip: In this site's CSS reference manual, we have a detailed description of the CSS:link selector.


Common link styles

Based on the example of the color change of the link above, see what state it is in.

Let's go to the link style in some other common way:

Text decoration

text-decoration is primarily used to remove underscores from links:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Try it out . . .

The background color

The background color property specifies the linked background color:

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Try it out . . .


CSS Links (link)

More Examples

Add hyperlinks with different styles
This example shows how to add additional styles to hyperlinks.

Advanced - Create a link box
This example demonstrates a more advanced example where we combine several CSS properties to appear as boxes.