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

如您所见，倾斜效果很好，但是当我只希望倾斜盒子阴影时，它也会倾斜.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

这是一个有多种背景的想法：

.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

摆弄了更多的伪元素和类之后，我有了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;
}

感谢您的建议，我也想为此使用阴影效果，因为我也在尝试为滑动动作设置动画。

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

3 个答案: