Transition not applying on hover CSS-CodePudding

I'm trying to get the "::after" content defined for the ".projectBtn" element upon hovering it, with a subtle transition. However, I've tried applying the

transition: all 1s linear;

to ".projectBtn::after" as well as ".projectBtn" but it still shows up suddenly.

Here is the code -

CSS -

.projectFooter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5em;
}
.projectTech {
  display: flex;
  justify-content: flex-end;
  transition: all 2s linear;
  gap: 1em;
}
.projectBtn {
  background-color: inherit;
  transition: all 2s linear;
  color: inherit;
}

.projectBtn:hover::after {
  transition: all 2s linear;
  content: " This project is made with the help of ReactJS.";
}

JSX -

<div className="projectFooter">
            <div className="projectTech">
              <button className="projectBtn">
                <FaReact size={25} />
              </button>
            </div>

            <div className="projectGithub">
              <FiGithub size={18} />
            </div>
          </div>

Here is the screenshot of what it looks like.

CodePudding user response：

This is because you are not using any transform properties on your ::after content.

Refer the code below. Hoping it might help you.

button {
    outline: none;
    border: none;
    padding: .5rem;
    font-family: 'Helvetica Neue';
    font-size: 48px;
    color: rgb(20, 20, 20);
    position: relative;
    background: none;
}

button::after {
    content: 'This project is made using React';
    font-size: 14px;
    position: absolute;
    left: 100%;
    white-space: nowrap;
    top: 50%;
    opacity: 0;
    transform: translateX(-30%) translateY(-50%);
    transition: all .5s ease-in;
}

button:hover::after {
     opacity: 1;
     transform:translateX(10%) translateY(-50%);
}

<button>⚛</button>