html – How to move this box-shadow?-ThrowExceptions

Exception or error:

I’m a complete beginner when it comes to coding so I found this box shadow on the internet but don’t know how to move it so it fits the font I’m using. heres 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 this is the shadow part i’d want to move up somehow

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

I’ve tried adding margin, padding, and tweaking it but nothing I do will work. It moves to the sides but never up. Does someone know what the problem could be here? Any help appreciated.

edit: the html!

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

edit2: added snippet :: 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>

edit3: adding some pictures for clearance.
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 on the top instead of the bottom.
how can I make this be on the bottom like in the first screenshot?

How to solve:

To give it proper box-shadow just make it to be a block.

Here I only add display:inline-block to the span. then you can play with the box position in the box-shadow value. (currently is 0 to the left and -15px to the bottom, if you want it face up, you probably want a positive shift from the bottom)

.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>

Leave a Reply

Your email address will not be published. Required fields are marked *