How to make the bottom box shadow stretch across the whole header

I recently found out how to have the box shadow show up on only one side of an element, however, it doesn’t go the full length of the element, and stops a bit short of the edge of the screen on both sides as shown in the code snippet and image below. Does anyone have a fix to this/is it even possible to make it stretch the whole way across? All help is appreciated.

Example Image

header {
    box-shadow: 0 5px 7.5px -7.5px gray;
}
<header>Header Shadow Example</header>

Answer

Box-shadow creates the effect on the element itself — since you have margin from the body, you can use a psuedo:after element with negative left and right values to cover that distance.

body {
  margin: 0;
  padding: 0;
}

main {
  margin: 0;
  padding: 0 15px;
}

header { 
  position:relative; 
}

header::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 -15px;
  box-shadow: 0 3px 3px grey;
}
<main>
   <header>Header Shadow Example</header>
</main>

Leave a Reply

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