html - 如何仅将变换效果应用于框阴影

Question

我正在构建一个使用 :hover 伪类来显示框阴影的菜单。

Here's a nav item as normal和 here's the same item under :hover .

我正在使用 transform 属性对框阴影应用倾斜，使其看起来像一个厚实的、重叠的、倾斜的下划线。

.link:hover {
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
}

如您所见，倾斜有效，但当我只希望 box-shadow 倾斜时，它也会倾斜 .link 文本。

我尝试像这样使用@apply 创建父样式:

--link-underline: {
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
}

...

.link:hover {
    @apply --link-underline;
}

但是当我将鼠标悬停在链接上时没有任何变化，我玩弄了一个::after 伪元素，该元素将阴影添加到不可见的文本元素，但也找不到在那里工作的修复程序。如果有任何建议，我将不胜感激。谢谢!

Answer 1

在更多地摆弄伪元素和类之后，我有一个 working solution !

首先，我将这两个属性添加到我原来的 .link 类中，确保文本稳定:

display: inline;
position: relative;

然后我为我的 .link 类创建了一个::after 伪元素:

.link::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
    opacity: 0;
}

此元素使用 z-index 位于原始文本下方，并以 0 不透明度隐藏自身。框阴影和倾斜应用于此::after 元素，但由于其内容为空，因此不会影响任何文本。然后我需要做的就是添加 :hover 函数，它将伪类置于 1 不透明度上:

.link:hover::after {
    opacity: 1;
}

感谢您的建议，我想为此使用 box-shadow，因为我也想为滑动 Action 设置动画。