I'm trying to add a cool little opacity transition for my extension. I've looked up many ways to go about this, and nothing has seemed to work so far. Is this even possible? I have the latest version of Chrome.

A preview of it not working

CSS:

.container .primary:after {
  opacity: 0;
  transition: opacity 6s ease-out;
}

.container .primary:hover:after {
  opacity: 1;
  content: "Go through a list of friends to remove";
  position: absolute;
  top: 100%;
  width: 100vw;
  height: 20px;
  margin: 10px;
  font-size: 13px;
}

CodePudding user response：

It's hard to reproduce from your code but there's a few main problems:

• Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.

• It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.

• You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.

And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:

.container {
  position: relative;
  padding:10px;
  font-family:'Arial';
  border:1px solid black;
}

.container .tooltip {
  opacity: 0;
  transition: opacity 0.4s ease-out;
  position: absolute;
  top: 100%;
  left: 0;
  height: 20px;
  padding:10px;
  font-size: 13px;
}

.container .primary:hover .tooltip {
  opacity: 1;

}

<div >
  <div >div
  <div >"Go through a list of friends to remove"</div>
  </div>
</div>