Being a text element, a link follows all the CSS on Text, but some styles are provided especially to the links in order to make them dynamic.
Before we start with CSS on Links, we must understand the four states of a link. These are:
For every state, we can develop a style. The most important thing is to keep the order of these states always, as they are. Following is the only epecific property that is used with hyperlinks.
Property | Value | Description |
---|---|---|
text-decoration | none; | Removes the default underline |
underline; | Sets an underline | |
overline; | Sets an overline | |
line-through; | Sets a strike through |
Example 1: Simple hyperlinks with text-decoration, color and background-color
Example 2: All four states of hyperlinks
Example 3: Hyperlinks as buttons with the help of padding