如何移动此框阴影

Question

在编码方面，我是一个完全的初学者，所以我在互联网上发现了这个方框阴影，但不知道如何移动它，所以它适合我使用的字体。这是标题的css：

.sidebar-title {
position:absolute;
z-index:150;
top:100px;
left:330px;
width:200px;
height:30px;
text-align:center;
color:#000;
background-color:#fff;
text-transform:lowercase;
font-size:20px;
padding:10px;
line-height:33px;
box-sizing:border-box;
font-weight:normal;
font-family:'dalmatins';
}

这是阴影部分，我想以某种方式向上移动

.sidebar-title span {
box-shadow:#aaa 0px -15px 0px inset;
padding:0px 2px;
}

我试过添加边距、填充和调整，但我所做的一切都无济于事。它向两侧移动，但从未向上移动。有人知道这里可能出了什么问题吗？感谢您的帮助。

编辑：html！

<div class="sidebar-title">
<a href="/"><span>your love is sunlight</span></a>
</div>

编辑2：添加的片段：：Rickard

.sidebar-title {
position:absolute;
z-index:150;
top:100px;
left:330px;
width:200px;
height:30px;
text-align:center;
color:#000;
background-color:#fff;
text-transform:lowercase;
font-size:20px;
padding:10px;
line-height:33px;
box-sizing:border-box;
font-weight:normal;
font-family:'dalmatins';
}
.sidebar-title span {
box-shadow:#aaa 0px -15px 0px inset;
padding:0px 2px;
}

<div class="sidebar-title">
<a href="/"><span>your love is sunlight</span></a>
</div>

编辑3：添加一些图片以获得许可。在&我希望更改字体后的外观如何。

在改变font-size、font-family&line-height。

添加display:inline-block后

编辑4：用这个替换box-shadow之后

.sidebar-title span {
background: linear-gradient( #b99e94, #b99e94) 
center/
100% 15%  /* adjust this to control the size*/
no-repeat;
}

它几乎是完美的，只是线条更多地在顶部而不是底部。我怎样才能像第一张屏幕截图中那样把它放在底部？

Answer 1

要给它适当的box-shadow，只需使它成为block即可。

在这里，我只将display:inline-block添加到跨度中。则可以使用CCD_ 9值中的框位置进行播放。(目前左边是0，底部是-15px，如果你想让它面朝上，你可能想从底部向上移动(

.sidebar-title {
position:absolute;
z-index:150;
top:100px;
left:330px;
width:200px;
height:30px;
text-align:center;
color:#000;
background-color:#fff;
text-transform:lowercase;
font-size:20px;
padding:10px;
line-height:33px;
box-sizing:border-box;
font-weight:normal;
font-family:'dalmatins';
}
.sidebar-title span {
display: inline-block;
box-shadow:#aaa 0px -15px 0px inset;
padding:0px 2px;
}

<div class="sidebar-title">
<a href="/"><span>your love is sunlight</span></a>
</div>