Path in CSS

With CSS, the path can be styled very differently.

With CSS, the path can be styled very differently.

Style the path

The path is styled using features like color, font-family, background…

 a { 
color : hotpink ;
}

In addition, the path is also styled differently depending on their status.There are 4 states of the path, including:

  1. a: link - the normal path has not been accessed by the user
  2. a: visited - the link has been accessed by the user
  3. a: hover - the link that the user hovered over
  4. a: active - when clicked

When styling the path according to the path state, it is necessary to follow some rules:

  1. a: hover must go after a: link and a: visited
  2. a: active must go after a: hover

Text Decoration

text-decoration often used to remove underscores from paths.

 a:link { 
text-decoration : none ;
}

a:visited {
text-decoration : none ;
}

a:hover {
text-decoration : underline ;
}

a:active {
text-decoration : underline ;
}

Background color

The background-color is used to select the background color for the path.

 a:link { 
background-color : yellow ;
}

a:visited {
background-color : cyan ;
}

a:hover {
background-color : lightgreen ;
}

a:active {
background-color : hotpink ;
}

Advanced - click on the link button

Here is an advanced example of combining some CSS properties to display the path as a box / button.

 a:link, a:visited { 
background-color : #f44336 ;
color : white ;
padding : 14px 25px ;
text-align : center ;
text-decoration : none ;
display : inline-block ;
}

a:hover, a:active {
background-color : red ;
}

Previous post: Icon in CSS

The following article: List in CSS

4 ★ | 1 Vote