Javascript 如何将长方体阴影赋予a<；部门>；元素或<；hr/>；阴影从中间淡出的元素？

我得到了一个UI设计，我被要求用sass/css在React.js中重新创建它。 所附图片是UI设计侧边栏的一部分。正如您所看到的，在侧边栏的选定选项下方有一个框阴影效果，阴影从中间开始淡出。
我假设可以通过将阴影效果置于

元素或

元素本身来实现。我已经完成了图标的位置和间距，我只需要实现阴影部分。
如何获得这样的阴影效果？
请帮我做这个。
多谢各位

---

像这样的东西正是你想要的

使用z-index:-1，我们可以将伪元素定位在其父元素下方，并使用第4个参数作为box shadow，我们可以增加其范围。调整数字以获得所需的结果

.shadow
{
位置：相对位置；
宽度：300px；
高度：120px；
背景：#ccc；
}
.shadow：：之后
{
内容：''；
显示：块；
位置：绝对位置；
底部：30px；
左：50%；
盒影：0 0 60px 60px rgba（0,0,0,0.5）；
宽度：0；
身高：0；
z指数：-1；
}

---

谢谢！我会试试这个，如果我能用你的想法得到想要的效果，那么我会把你的答案标记为正确答案。