Search code examples
cssbackground-colorpseudo-element

CSS :target::before pseudo-element causing problems with its container’s background-color

I am utilizing :target::before pseudo-elements and element padding in order to properly position target sections under a fixed header, however that is causing the section container’s background-color to expand beyond the top of that section and into the previous section’s content (and thus defeating its purpose of visually dividing the content by alternating the background-color of section containers).

How can I adjust my code so that the section’s :target::before pseudo-element's height + negative margin-top doesn’t visually affect the target section’s background-color?

Strict CSS solutions are preferable of course, but JavaScript or JQuery are acceptable.

Relevant CSS Snippet:

.header_container {height: 6.8rem; margin: 0; padding: 0; width: 100vw; position: fixed; top: 0; display: block; z-index: 100;}
.container {width: 100%;}
.container:nth-of-type(even) {background-color: rgba(0,0,0,.06);}

/* Content positioned under fixed header */    
.main {margin-top: 6.8rem; width: 100%;} 
:target::before {height: 6.8rem; margin-top: -6.8rem; margin: 0; content: ""; display: block; visibility: hidden;}

/* Section padding */
.Section {padding-bottom: 5.5rem; width: 90%; margin: 0 auto;}
.Section:not(:target) {padding-top: 5.5rem;}
:target .services_header {padding-top: 5.5rem;}

Full Code:

html {
  overflow-x: hidden;
  margin-right: calc(100% - 100vw);
  font-size: 62.5%;
  line-height: 1.25;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-size: 1.4rem;
  letter-spacing: .0107em;
  color: #888;
  background-color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-align: left;
}

a:link,
a:visited,
a:hover,
a:focus {
  text-decoration: none;
  color: #fff;
}

a:hover,
a:focus {
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

.header_container {
  width: 100vw;
  position: fixed;
  top: 0;
  display: block;
  z-index: 100;
  font-size: 1.6rem;
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  width: 100%;
}

.container:nth-of-type(even) {
  background-color: rgba(0, 0, 0, .06);
}

.Section {
  padding-bottom: 5.5rem;
  width: 90%;
  margin: 0 auto;
}

.Section:not(:target) {
  padding-top: 5.5rem;
  z-index: 90;
}

:target .services_header {
  padding-top: 5.5rem;
}

.Hcontainer {
  height: 6.8rem;
  margin: 0;
  padding: 0;
}

.main {
  margin-top: 6.8rem;
  width: 100%;
}

:target::before {
  margin: 0;
  content: "";
  display: block;
  visibility: hidden;
  height: 6.8rem;
  margin-top: -6.8rem;
}


/*** Text ***/

.logo {
  padding: 1rem 1.7rem 1rem 0;
  display: inline-block;
}

.services_header {
  padding: 0;
  position: relative;
  top: 0;
  left: 0;
  margin: 0 0 1.6rem 0;
  font-size: 2rem;
  color: #000;
}

.copy_description {
  margin: 1rem 0 0 0;
  padding: 0;
  line-height: 1.875;
}


/*** Menu  ***/

nav {
  margin: 0 auto;
  width: 90%;
  position: relative;
  display: inline-block;
  z-index: 100;
  padding: 1.6rem 0;
  line-height: 3.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 3.2rem;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

nav li {
  display: block;
  float: left;
  padding: .5rem 0rem;
  position: static;
  flex: 0 1 auto;
  margin: 0rem;
  max-width: 13rem;
  line-height: 1.29;
  transition: .2s ease;
}

nav ul>li:not(:last-child) {
  margin-right: 3.5rem;
}

nav li a {
  padding: 0;
  line-height: 1.29;
  align-items: flex-start;
  display: flex;
}
<div id="header" class="header_container Hcontainer">
  <nav>
    <span class="logo"><a href="#">LOGO</a></span>
    <ul>
      <li><a href="#product">PRODUCT</a></li>
      <li><a href="#strategy">STRATEGY</a></li>
      <li><a href="#marketing">MARKETING</a></li>
    </ul>
  </nav>
</div>

<div class="main">
  <div class="container">
    <div id="product" class="Section">
      <div class="services_header">PRODUCT</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="container">
    <div id="strategy" class="Section">
      <div class="services_header">STRATEGY</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="container">
    <div id="marketing" class="Section">
      <div class="services_header">MARKETING</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</div>

Solution

  • Consider the after pseudo element of section to apply the background coloration and you can easily control its height on :target

    Relevant code:

    .container:nth-of-type(even) .Section:after {
  content:"";
  position:absolute;
  top:0;
  /* To cover the 5% removed from width on each side */
  left:-11%; /* more precisely it's 100/9*/ 
  right:-11%;
  /**/
  bottom:0;
  background-color: rgba(0, 0, 0, .06);
}
.container:nth-of-type(even) .Section:target:after {
   top:6.8rem; /* The height of the before */
}
.Section {
   position:relative; /* Added */
   padding-bottom:5.5rem; 
   width: 90%; 
   margin: 0 auto; 
}

    Full code:

    html {
  overflow-x: hidden;
  margin-right: calc(100% - 100vw);
  font-size: 62.5%;
  line-height: 1.25;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-size: 1.4rem;
  letter-spacing: .0107em;
  color: #888;
  background-color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-align: left;
}

a:link,
a:visited,
a:hover,
a:focus {
  text-decoration: none;
  color: #fff;
}

a:hover,
a:focus {
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

.header_container {
  width: 100vw;
  position: fixed;
  top: 0;
  display: block;
  z-index: 100;
  font-size: 1.6rem;
  background-color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  width: 100%;
}

.container:nth-of-type(even) .Section:after {
  content:"";
  position:absolute;
  top:0;
  left:-11%;
  right:-11%;
  bottom:0;
  background-color: rgba(0, 0, 0, .06);
}
.container:nth-of-type(even) .Section:target:after {
   top:6.8rem;
}

.Section {
  padding-bottom: 5.5rem;
  width: 90%;
  margin: 0 auto;
  position:relative;
}

.Section:not(:target) {
  padding-top: 5.5rem;
  z-index: 90;
}

:target .services_header {
  padding-top: 5.5rem;
}

.Hcontainer {
  height: 6.8rem;
  margin: 0;
  padding: 0;
}

.main {
  margin-top: 6.8rem;
  width: 100%;
}

:target::before {
  margin: 0;
  content: "";
  display: block;
  visibility: hidden;
  height: 6.8rem;
  margin-top: -6.8rem;
}


/*** Text ***/

.logo {
  padding: 1rem 1.7rem 1rem 0;
  display: inline-block;
}

.services_header {
  padding: 0;
  position: relative;
  top: 0;
  left: 0;
  margin: 0 0 1.6rem 0;
  font-size: 2rem;
  color: #000;
}

.copy_description {
  margin: 1rem 0 0 0;
  padding: 0;
  line-height: 1.875;
}


/*** Menu  ***/

nav {
  margin: 0 auto;
  width: 90%;
  position: relative;
  display: inline-block;
  z-index: 100;
  padding: 1.6rem 0;
  line-height: 3.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 3.2rem;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

nav li {
  display: block;
  float: left;
  padding: .5rem 0rem;
  position: static;
  flex: 0 1 auto;
  margin: 0rem;
  max-width: 13rem;
  line-height: 1.29;
  transition: .2s ease;
}

nav ul>li:not(:last-child) {
  margin-right: 3.5rem;
}

nav li a {
  padding: 0;
  line-height: 1.29;
  align-items: flex-start;
  display: flex;
}
    <div id="header" class="header_container Hcontainer">
  <nav>
    <span class="logo"><a href="#">LOGO</a></span>
    <ul>
      <li><a href="#product">PRODUCT</a></li>
      <li><a href="#strategy">STRATEGY</a></li>
      <li><a href="#marketing">MARKETING</a></li>
    </ul>
  </nav>
</div>

<div class="main">
  <div class="container">
    <div id="product" class="Section">
      <div class="services_header">PRODUCT</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="container">
    <div id="strategy" class="Section">
      <div class="services_header">STRATEGY</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="container">
    <div id="marketing" class="Section">
      <div class="services_header">MARKETING</div>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p class="copy_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</div>