CODEWITHSUNDEEP
css
DD1229
DD1229

Reputation: 408

Pseudo Class Color Change on Hover

I have an accordion where upon hover, the text color changes. Sounds simple enough, but I have an issue with the content within a pseudo class changing color. I feel like I've added the :after:hover class in the to change the color, but it's not working? Any reason why?

There's a more detailed Codepen here.

<div class="task-resources-accordion">
  Title
</div>
<div class="task-resources-accordion-panel">
  <div class="task-resources-accordion-content">
    <p>Content</p>
  </div>
</div>


/* Accordions */

.task-resources-accordion {
  background-color: #eee;
  color: #1e1e1e;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s ease;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
}

.task-resources-accordion.active,
.task-resources-accordion:hover {
  background-color: #21bfb2;
  color: #fff;
}

.task-resources-accordion:after {
  content: "\2795";
  font-size: 13px;
  float: left;
  margin-right: 10px;
}

.task-resources-accordion:after:hover {
  color: #fff;
}

.task-resources-accordion.active:after {
  content: "\2796";
  color: #fff;
}

.task-resources-accordion-panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease;
  opacity: 0;
  margin-bottom: 10px;
  border: 1px solid #eaeaea;
}

.task-resources-accordion-panel.show {
  opacity: 1;
  max-height: 1000px;
}

.task-resources-accordion-content {
  padding: 15px;
}

Upvotes: 0

Views: 355

Answers (3)

Rolando Yera
Rolando Yera

Reputation: 868

Some unicodes css properties are not changeable, and you picked one of those. Try a different code and as of css3 you have to use double colons, but that won't fix your problem, just a FYI. See [this pen][1] that I copied from yours for the fix. https://codepen.io/javascript-examples/pen/jOayVgq

<div class="task-resources-accordion">
  Title
</div>
<div class="task-resources-accordion-panel">
  <div class="task-resources-accordion-content">
    <p>Content</p>
  </div>
</div>

And the css:

 /* Accordions */

 .task-resources-accordion {
 background-color: #eee;
 color: #1e1e1e;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 box-sizing: border-box;
 text-align: left;
 border: none;
 outline: none;
 transition: 0.4s ease;
 font-family: "AleckCdBold", sans-serif;
 font-size: 18px;
 line-height: 24px;
 letter-spacing: 0;
 }

 .task-resources-accordion.active,
 .task-resources-accordion:hover {
  background-color: #21bfb2;
  color: #fff;
 }

.task-resources-accordion::after {
 content: "\002B";
 font-size: 20px;
 float: left;
 margin-right: 5px;

 }

.task-resources-accordion::after:hover {
 content: "\002B";
 color: #fff;
 }

.task-resources-accordion.active::after {
 content: "\2212";
 font-size: 20px;
 margin-right: 5px;
 color: #fff;
 }

.task-resources-accordion-panel {
 padding: 0 18px;
 background-color: white;
 max-height: 0;
 overflow: hidden;
 transition: 0.4s ease;
 opacity: 0;
 margin-bottom: 10px;
 border: 1px solid #eaeaea;
 }

 .task-resources-accordion-panel.show {
  opacity: 1;
  max-height: 1000px;
  }

 .task-resources-accordion-content {
  padding: 15px;
  }

Upvotes: 2

zainhassan
zainhassan

Reputation: 1780

You are using unicode in content. Its color cannot be changed by css. Can't change font color on unicode character

Upvotes: 0

Farrukh Ali
Farrukh Ali

Reputation: 31

Use 1 more colon with after and correct the position of hover like: task-resources-accordion:hover::after

Upvotes: 0

Related Questions