I've been working on a webpage. I've taken a div and it has an 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:

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;
}

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I believe your code is not working because ::before and ::after pseudo elements have to have the "content:;" property set on them (preferably content:""; "" is blank). Also, no given height or width is given, so the element has no space to show your color. Lastly, I believe you mean background-color instead of color on your ::after and ::before because the color is fore text.

CodePudding user response：

A comment has clarified that it is the color of the h1 that is required to change on hover.

This has nothing to do with pseudo elements which can be used to add extra effects to an element.

In this case we do not want to add stuff, we want to change the color of the text which is already there.

This snippet removes the references to pseudo elements and instead sets a new color when hovered.

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 {
  color: palegreen;
}

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>