As a beginner in coding, I stumbled upon this box shadow effect online but I am struggling to adjust it to match the font style I am using. Here is the CSS for the title:
.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';
}
And here is the part of the code where I'm having difficulty moving up:
.sidebar-title span {
box-shadow:#aaa 0px -15px 0px inset;
padding:0px 2px;
}
I've attempted to adjust margins and padding without success. It shifts sideways but not upwards. Any ideas on what might be causing this issue? Any assistance would be greatly appreciated.
EDIT: Including the HTML structure!
<div class="sidebar-title">
<a href="/"><span>your love is sunlight</span></a>
</div>
EDIT 2: Added snippet by 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>EDIT 3: Adding some images for clarification. before & how I'd like it to look with the changed font.
after changing the font-size, font-family & line-height.
after adding display:inline-block
EDIT 4: After replacing the box-shadow with this
.sidebar-title span {
background: linear-gradient( #b99e94, #b99e94)
center/
100% 15% /* adjust this to control the size*/
no-repeat;
}
It's almost perfect except the line is more at the top instead of the bottom. how can I make this be on the bottom like in the first screenshot?