Transition not applying on hover CSS - css

Question

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.

Answer 1

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>