Question 236204 in CSS Question posted in
Some basic documentation can be found here.

Css – Style element and ::before on hover

I’m trying to use CSS to make the text "Permits Required" and the ::before pseudo-class turn red – the ::before contains an icon.

.knHeader__menu-list-item:hover::before {
  color: #aa0003 !important;
}

.knHeader__menu-list-item:hover {
  color: #aa0003 !important;
}
<li class="knHeader__menu-list-item">
  ::before
  <a href="#permits-required" class="knHeader__menu-link knHeader__menu-link--text">
    <!---->

    Permits Required

    <!---->
  </a>
</li>

This makes only the icon turn red not the "Permits Required". I need both to turn red, at the same time when either of them are hovered over.

Tags:

3

Answers


  1. 0

    You just need to use color: inherit;

    sample code

    .class-li {
  color: green;
  }
.class-li a {
  color: inherit;
  }
.class-li::before {
  content : ':li-before: '
  }
.class-li:hover {
  color: red;
  }
    <ul>
  <li class="class-li">
    <a href="#" class="class-a1 class-a2"> 
      Permits Required
    </a>
  </li>
</ul>
    Login or Signup to reply.
  2. 0 
    .knHeader__menu-list-item:hover::before,
.knHeader__menu-list-item:hover a {
  color: #aa0003 !important;
}

.knHeader__menu-list-item::before {
  content: 'Icon';
  }
    <li class="knHeader__menu-list-item">
  <a href="#permits-required" class="knHeader__menu-link knHeader__menu-link--text">
  <!---->
  Permits Required
  <!---->
  </a>
</li>

    Try the above.

    Login or Signup to reply.
  3. 0

    When you hover over .knHeader__menu-list-item you are changing the ::before and the item itself. However its child a is still given the browsers default link styling. We can tell the a to inherit the colour from its parent:

    .knHeader__menu-list-item:hover a {
  color: inherit;
}

    Here’s your demo snippet updated to do just that:

    .knHeader__menu-list-item::before {
  content: "(before)";
}

.knHeader__menu-list-item:hover {
  color: #aa0003;
}

.knHeader__menu-list-item:hover a {
  color: inherit;
}
    <li class="knHeader__menu-list-item">
  <a href="#permits-required" class="knHeader__menu-link knHeader__menu-link--text">
    Permits Required
  </a>
</li>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search