HTML+；CSS。如何在按钮上方放置水平线？

我是一名iOS和3D开发人员，负责一些Web开发工作。在HTML/CSS/JS中，我发现不可能做一些我认为微不足道的事情：在按钮上方放置一条水平线

这是我的按钮和背景图像：

<button id="myButton" style="background-image: url(assets/cursor-filter-thumbnail.png);" class="igv-filter-button" data-toggle="modal" data-target="#myDataTarget">
</button>

现在我想在这个按钮上放置一条水平线，我将使用JS以编程方式向上/向下移动它。有人能给我点化一下吗？

1）在按钮周围放一个容器，如图所示

<span class='linestyle'>
<button id="myButton" style="background-image: url(assets/cursor-filter-  
thumbnail.png);" class="igv-filter-button" data-toggle="modal"   
data-target="#myDataTarget">
</button>
<span>

3） 将填充顶部添加到按钮

.igv-filter-button    { padding-top:1px;}

---

4） 以编程方式调整按钮的填充

可以使用“长方体阴影”创建所需的效果，甚至可以为其设置动画，但父元素背景色必须为纯色

CSS:

button{
    border:none;
    box-shadow:0 -5px 0 white, 0 -6px 0 rgba(0,0,0,0.5);
}

---

我会看到这一点，并在评论中使用：beforexd6_uu，这是一个更好的答案。之前的方法会更好。

.igv-filter-button    { padding-top:1px;}

button{
    border:none;
    box-shadow:0 -5px 0 white, 0 -6px 0 rgba(0,0,0,0.5);
}