.Current link styling on CSS only works on the 1st page and doesn't transfer to the other

Question

So the css that I have works for both html pages, however, the current link styling only works on the first page and doesn't transfer to the 2nd page when clicked. Do you know why this would be?

css that handles the current link styling

li.current > a:link {
    border-bottom: 0.3px solid #000000;
}

1st page html (works on this)

<!--Header-->
<header class="boxed" id="header-white">
    <div class="header-margin">
        <div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div>
        <ul class="header-nav">
            <li class = "current"><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li>
            <li><a class="ajax-link" href="about-me.html">About me</a></li>
        </ul>

2nd html page (works on this one, only if opened first)

<!--Header-->
<header class="boxed" id="header-white">
    <div class="header-margin">
        <div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div>
        <ul class="header-nav">
            <li><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li>
            <li class = "current"><a class="ajax-link" href="about-me.html">About me</a></li>
        </ul>

Answer 1

Please try below css for get link in second page. You need to put "a:visited" property.

<style type="text/css">
    li.current > a:link {
        border-bottom: 0.3px solid green;
        color: red;
    }
    li.current > a:visited {
        border-bottom: 0.3px solid green;
        color: red;
    }
</style>

Answer 2

The behavior you're seeing is expected. The :link pseudo-class refers to links that have never been visited. By definition, the user must have clicked the link to the current page to get to it, so it will not be selected by :link .

You need to use li.current > a:visited .