如何仅将变换效果应用于box-shadow

Question

我正在构建一个使用：hover伪类来显示box-shadow的菜单。

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

我正在使用transform属性将偏斜应用于box-shadow，因此它看起来像一个粗短，重叠，倾斜的下划线。

.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;
}

但是当我在链接上盘旋时没有任何变化，我玩了一个:: 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

在摆弄伪元素和类更多之后，我有一个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，因为我也试图为滑动动画制作动画。

Answer 3

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

.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>