CSS hover property isn't working for nested div

I've been working on a webpage. I've taken a div and it has a h1 header into it. I am trying to provide hover (before and after) effects to the same but, the code i've written doesn't seem to be working for me. Would you please explain to me, why is it not working and what can be the workaround for it?

Here is the HTML:

<div class="section-intro">
    <div class="nav-bar">
        /**anchor links**/
    </div>
    <div class="intro-content">
       <h1>
          h1 Header
       </h1>
    </div>
</div>

Here is the CSS:

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-repeat: space;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}
.section-intro{
    overflow: hidden;
    position:relative;
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    background-repeat: no-repeat;
    background-size:cover;
    justify-content: center;
    justify-items: center;
    display: flex;
    background-image: url('../images/cc2dea0.jpg');
    /**nimation: slide ease 4s infinite;**/
    
}

.intro-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.intro-content h1:hover::before{
    color: palegreen;
}

.intro-content h1:hover::after{
    color: palegreen;
}