Link States in CSS
I think that when visiting various sites on the Internet, you have noticed that links usually react to mouse hovering over them. This effect can be achieved by setting the behavior of links in different states.
For example, like this - a:hover - we will catch the state when the mouse cursor is hovered over the link. At this moment we can, for example, change the color of the link or remove it/add an underline to it. The :hover construct is called a pseudo-class. Pseudo-classes allow you to catch different states of elements.
In addition to :hover, there are also pseudo-classes :link, which catch an unvisited link, and :visited, which catch a visited link. Some sites use them to show users where they have been and where they have not. There is also a pseudo-class :active, which catches the following state: the element has been clicked on with the mouse, but has not yet been released.
In the following example, the underline is removed for the link in the :hover state, the color is set to red in the :link state, green in the :visited state, and blue in the :active state. As a result, the link will initially be red, after clicking on it - green, if you click on it with the mouse and do not release it - blue, and if you hover over it with the mouse - it will become ununderlined:
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
a:active {
color: blue;
}
<a href="#">link</a>
:
