The <a> tag defines a hyperlink. By default, browsers add a blue color and an underline.
| Value | Meaning |
|---|---|
| underline | Default state |
| none | Removes underline |
| line-through | Strikethrough |
:hover is a pseudo-class. It triggers when the user's mouse moves over the element.
a {
text-decoration: none;
color: black;
}
a:hover {
color: #f43f5e;
text-decoration: underline;
}
MOUSE OVER THE LINK:
Hover Me!Styles links the user has already clicked.
a:visited { color: purple; }
Styles the link at the exact moment it is being clicked.
a:active { color: green; }
(Green while held down)
In professional projects, we combine these to create a smooth user experience (UX).
/* 1. Base State */
a {
text-decoration: none;
color: #1e293b;
font-weight: bold;
}
/* 2. Interaction */
a:hover {
color: #3b82f6;
}
/* 3. Click Moment */
a:active {
color: #ef4444;
}