CSS: target :: before псевдоэлемент, вызывающий проблемы с цветом фона своего контейнера

Question

Я использую :target::before псевдоэлементы и заполнение элементов, чтобы правильно расположить целевые разделы под фиксированным заголовком, однако это заставляет фоновый цвет контейнера раздела расширяться за верхнюю часть этого раздела и переходить в предыдущий раздел. содержимого (и, таким образом, не позволяя визуально разделить содержимое путем чередования цвета фона контейнеров раздела).

Как я могу настроить свой код так, чтобы высота :target::before псевдоэлемента раздела + отрицательное поле-top визуально не влияет на целевую секцию background-color?

Конечно, предпочтительны строгие решения CSS, но приемлемы JavaScript или JQuery.

Соответствующий фрагмент CSS:

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

ПолныйКод:

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>

Answer 1

Рассмотрим псевдоэлемент после, чтобы применить фоновую окраску, и вы можете легко контролировать его высоту на :target

Соответствующий код:

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

Полный код:

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>