How to move this box-shadow?

Question

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?

Can you post your HTML as well? The problem is probably because you're using `position: absolute`. You shouldn't use absolute, unless you know what you're doing. Let it be `relative` or the default: `static`. — Rickard Elimää, Feb 23 '20 at 09:37
@RickardElimää hi! added the html part. with `static` everything messed up, and `relative` won't let me move it up the same as `absolute`, but thank you! — mazedaven, Feb 23 '20 at 10:00
1) What do you want to achieve with your placement? Will it look the same on all resolutions? Try changing the size of the browser window, and you will see what I'm aiming at. 2) What do you want to achieve with `box-shadow` that `background` doesn't solve for you? — Rickard Elimää, Feb 23 '20 at 10:13
@RickardElimää changing the browser window size doesn't change the resolution at all! how does this work with `background` ? I'm really a noob so the only answer to what I want to achieve I can give you is, to have the title "highlighted" with this? hope that makes sense! — mazedaven, Feb 23 '20 at 10:41
No, but changing your browser window it "mimics" other kinds of resolutions. My point being that your hard coded 330px will look different on different screens, which the snippet shows. The problem I'm showing is that the base of your code/thinking is wrong. — Rickard Elimää, Feb 23 '20 at 10:45
Again, what do you want to achieve? Can you add an image of how you want the entire page to look like? — Rickard Elimää, Feb 23 '20 at 10:46
@RickardElimää I added the pictures so it might be a bit clearer. But I'm looking for a quick fix more than a lesson on coding since all I'm trying to do is customise a theme code I paid for and while the creator allows it, she doesn't answer questions like this due getting so many, thats why I had to come here. — mazedaven, Feb 23 '20 at 11:02
related: https://stackoverflow.com/a/60350695/8620333 .. you will need gradient to have better control — Temani Afif, Feb 23 '20 at 11:02
@TemaniAfif this is almost perfect!! I added a image in the post above because while it works, it's more on the top instead of the bottom where I'd like it to be, could you help me there? — mazedaven, Feb 23 '20 at 11:15
change `center` with `left 0 bottom X` and put what you want inside X. a pixel of percentage value — Temani Afif, Feb 23 '20 at 11:16
@TemaniAfif changing it to `left 0 bottom 0` results in the lines moving to far down, and sadly if i add any other number than `bottom 0` the lines disappear completely so I can't seem to be able to? — mazedaven, Feb 23 '20 at 11:20
`X` should be either a pixel or percentage value (ex: 5px or 10%) — Temani Afif, Feb 23 '20 at 11:23

score 0 · Answer 1 · answered Feb 23 '20 at 10:25

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>

your snippet sadly doesn't work because on the webpage, theres an automatic line-break between **your love is** and **sunlight** so adding `display:inline-block` got rid of one of the lines and only the **sunlight** part is highlighted now. but thank you! — mazedaven, Feb 23 '20 at 10:39
I wonder what you are trying to archive.. with `box-shadow:#aaa 0px -15px 0px inset;` you have 15px line of gray. of course with that it will not cover 2 lines. so how you want the result to look like? — Yosef Tukachinsky, Feb 23 '20 at 12:20

How to move this box-shadow?

1 Answers1