Styling link: Which state for a link that is being visited?

July 27, 2022

For a project, I need to create a small navigation menu. This menu only has two links Accommodations and Activities. And I want to add some styling to these links, more precisely when I’m on the page of the link or I hover on the link, I want the corresponding link to change color and have a blue overline
like that.

To do that I tried to search the corresponding state, but I couldn’t find it, neither :active or :visited could do what I wished for.

Here is my code:

header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 32px;
}

.nav-button{
    font-family: Raleway;
    font-size: 14px;
    color: black;
    text-decoration: none;
    margin: 16px;
}

.nav-button:hover{
    color: #0065FC;
    border-top: 2px solid #0065FC;
    padding-top: 38px;
}

        <header>
   <nav>
     <a class="nav-button" href="#accommodations">Accommodations</a>
     <a class="nav-button" href="#activities">Activities</a>
   </nav>
</header>

P.S: By the way, for this project I can only use HTML and CSS, so no JS.

>Solution :

CSS has no pseudo-class meaning "The href attribute of this link matches the URL currently shown in the address bar".

The usual way get that effect you would need to use a programming language (either server-side or client-side) to add a class to the link, and then use a regular class selector.