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

Question

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

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

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

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

如您所见，倾斜有效，但当我只希望盒子阴影倾斜时，它也会倾斜 .link 文本。

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

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

...

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

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

Answer 1

我试了一下，我有点达到了你想要的，但我不确定这是否是最好的解决方案，但这有点管用。如果它在浏览器中发生变化，您可以更改 top: 11%; 的值以调整位置。希望这对您有所帮助。

hr.underline {
  border: 5px solid #7ed6df;
  transform: skew(-20deg);
  display: none;
}

.hover:hover .underline{
    display: flex;
    width: 5%;
    position: absolute;
    top: 11%;
    z-index: -1;
}

<div class="hover">
  <h3 class="link">Why</h3>
  <hr class="underline">
</div>

Answer 2

这是一个使用多重背景的想法：

.text {
  display:inline-block;
  padding:5px 10px 5px;
  background:
    linear-gradient(-225deg,transparent 10px,lightblue 10px) bottom left /51% 15px,
    linear-gradient(-45deg ,transparent 10px,lightblue 10px) bottom right/51% 15px;
  background-repeat:no-repeat;
  
  
  
/*the below is not relevant, can be removed if hover is not needed*/
  background-size:0 0;
}
.text:hover {
  background-size:51% 15px;
}

<div class="text">some text here</div>
<div class="text">text</div>
<br>
<div class="text">loooooooooooooooooooong text</div>

Answer 3

在摆弄伪元素和 class 之后，我有一个 working solution！

首先，我将这两个属性添加到我的原始文件中。link class，确保文本稳定：

display: inline;
position: relative;

然后我为我的 .link class:

创建了一个 ::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 函数，它将伪 class 放到 1 opacity:

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

谢谢你的建议，我想为此使用 box-shadow，因为我也想为滑动动作制作动画。

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

How to apply transform effect to box-shadow only

html

css

pseudo-class

pseudo-element

box-shadow