My code is not working as desired

Link to pen:

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:


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

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.