I am working on a navigation menu that utilizes the :hover pseudo classes to create a box-shadow effect.
This is how a normal nav item looks and this is the same item under :hover state.
To achieve a chunky, overlapping, slanted underline appearance, I am applying a skew transformation to the box-shadow.
.link:hover {
box-shadow: 0 -0.5em 0 #7ed6df inset;
transform: skew(-20deg);
}
The skew effect works as intended; however, it also distorts the text of the .link when I only want the box-shadow to be skewed.
I attempted to define a parent style using @apply like this:
--link-underline: {
box-shadow: 0 -0.5em 0 #7ed6df inset;
transform: skew(-20deg);
}
...
.link:hover {
@apply --link-underline;
}
Unfortunately, there was no noticeable change when hovering over the link. I also experimented with using an ::after pseudo-element to add the shadow to a hidden text element but could not find a solution that worked. Any advice would be greatly appreciated. Thank you!