My code is not working as desired

Link to pen: https://codepen.io/chiragbhansali/pen/LzpybO

I have three different links with different background gradients set with CSS custom properties. They are not working. However, other variables work with the ‘left’ property. How can I fix this?

Your links are in sections so are all first childs only. You’d need to target the sections:

e.g.

section:nth-child(2) .link::after {
	left: var(--left-2);
	background: var(--gradient-2);
	background:red;
}

section:nth-child(3) .link::after {
	left: var(--left-3);
	background: var(--gradient-3);
}

section .link:hover::after {
	left: 0;
	width: 100%;
}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.