Css 如何使用阴影显示悬停下划线，但保持左右两侧的不透明度

我想用阴影效果在菜单列表上创建一个悬停效果。 我想要这样。 （请参见“home effect”中的。）

我只是想展示一下这个设计 这是我的密码 很好用。 但需要从左右两侧进行一些不透明处理

正文{
/*美化*/
宽度：95vw；
高度：95vh；
背景色：#666；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.按钮{
字体：1em Arial，无衬线；
显示：内联块；
填充：1em；
边缘：1米；
/*边界半径：5px*/
文字装饰：无；
颜色：灰色；
/*设置悬停*/
/*如果不使用autoprefix，请记住为其他浏览器添加渐变前缀*/
背景图像：线性渐变（道奇蓝，道奇蓝），线性渐变（银色，银色）；
背景尺寸：0 5px，自动；
背景重复：无重复；
背景位置：中底；
过渡：所有。2放松；
}
.按钮：悬停{
/*下一行使下划线仅与文本一样宽*/
/*背景尺寸：calc（100%-2em）5px，自动*/
背景尺寸：100%5px，自动；
}

---

您可以将效果包含在渐变本身中：

更新代码以测试和调整：

背景：线性渐变（90度，透明，淡蓝色，淡蓝色，淡蓝色，透明）银色/*第二个渐变变成背景色*

下面是演示


正文{
/*美化*/
宽度：95vw；
高度：95vh；
背景色：#666；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.按钮{
字体：1em Arial，无衬线；
显示：内联块；
填充：1em；
边缘：1米；
/*边界半径：5px*/
文字装饰：无；
颜色：灰色；
/*设置悬停*/
/*如果不使用autoprefix，请记住为其他浏览器添加渐变前缀*/
背景：线性渐变（90度，透明，淡蓝色，淡蓝色，淡蓝色，淡蓝色，透明）银色；
背景尺寸：0 5px，自动；
背景重复：无重复；
背景位置：中底；
过渡：所有。2放松；
}
.按钮：悬停{
/*下一行使下划线仅与文本一样宽*/
/*背景尺寸：calc（100%-2em）5px，自动*/
背景尺寸：100%5px，自动；
}