Web Platform CSS

Styling Links

Links can be styled like anything else, and often you will want to change the default underline effect, or change how it reacts when the user hovers their cursor over them.

CSS has a mechanism for styling particular states an element might be in. These are called pseudo classes, and are referred to by a colon (:) and the pseudo class name following on from your selector.

The relevant pseudo classes for links are link (for unvisited links) visited, hover and active.

This will change the background of links to white when they are hovered over:

a:hover {
  background-color: white;
}

The default underline effect relates to the CSS property of text-decoration. If you want to turn it off:

a {
  text-decoration: none;
}