Задать background-color с помощью псевдоэлементов before, after

Question

Ребята, привет! Подскажите, пожалуйста, есть основной контейнер с блоками, который находится во wrapper с max-width: 1200px. Нужно задать фон боковым частям с помощью псевдоэлементов before, after. То есть у левого поля должен быть цвет левого блока, а у правого поля - цвет правого блока.

Подскажите, в чем моя ошибка?

Код на jsfiddle: Исходный код

  .honor-container .honor-content .honor.experience::after {
    background-color: #2B4177;
    position: absolute;
    content: '';
    right: 0;
    top: 0;
}

Все, уже разобралась сама)

.honor-container .honor-content .honor.courses::before {
    background-color: #4B67B1;
    position: absolute;
    content: '';
    top: 0;
    left: -50%;
    height: 100%;
    width: 50%;
}

Answer 1

Добавить:

.honor-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.honor-container:before,
.honor-container:after {
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 50%;
}

.honor-container:before {
  left: 0;
  background: red;/*поставить нужный цвет крайнего левого элемента */
}

.honor-container:after {
  right: 0;
  background: green;/*поставить нужный цвет крайнего правого элемента */
}

.honor-container {
  position: relative;
  width: 100%;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.honor-container .honor-content {
  display: flex;
  position: relative;
}

.honor-container .honor-content .honor {
  padding: 80px 60px;
  width: 33%;
  text-align: center;
}

.honor-container .honor-content .honor span {
  color: #fff;
  font-size: 50px;
}

.honor-container .honor-content .honor h3 {
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  color: #4B67B1;
  color: #fff;
  padding: 25px 0;
}

.honor-container .honor-content .honor p {
  line-height: 22px;
  color: #fff;
}

.honor-container .honor-content .honor.courses {
  background: #4B67B1;
  position: relative;
}

.honor-container .honor-content .honor.courses::before {
  background-color: #4B67B1;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
}

.honor-container .honor-content .honor.students {
  background: #383FA8;
}

.honor-container .honor-content .honor.experience {
  background: #2B4177;
  position: relative;
}

.honor-container .honor-content .honor.experience::after {
  background-color: #2B4177;
  position: absolute;
  content: '';
  right: 0;
  top: 0;
}


/*Добавить*/

.honor-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.honor-container:before,
.honor-container:after {
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 50%;
}

.honor-container:before {
  left: 0;
  background: red;/*поставить нужный цвет крайнего левого элемента */
}

.honor-container:after {
  right: 0;
  background: green;/*поставить нужный цвет крайнего правого элемента */
}

<div class="honor-container">
  <div class="wrapper">
    <div class="honor-content">
      <div class="honor courses">
        <span class="fas fa-book-open"></span>
        <h3>14 курсов</h3>
        <p>Diam sit imperdiet ullamcorper pellentesque mattis elit. Sagittis, orci integer nibh ut amet. </p>
      </div>
      <div class="honor students">
        <span class="fas fa-user-friends"></span>
        <h3>560 студентов</h3>
        <p>Condimentum nibh nisl molestie est. Odio vel enim imperdiet ut libero feugiat sit tempus. Augue nunc.</p>
      </div>
      <div class="honor experience">
        <span class="fas fa-graduation-cap"></span>
        <h3>10 лет опыта</h3>
        <p>Condimentum nibh nisl molestie est. Odio vel enim imperdiet ut libero feugiat sit tempus.</p>
      </div>
    </div>
  </div>
</div>

Или даже ещё намного проще, с помощью линейного градиента:

.honor-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-image: linear-gradient(90deg, red 50%, green 50%);
}

.honor-container {
  position: relative;
  width: 100%;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.honor-container .honor-content {
  display: flex;
  position: relative;
}

.honor-container .honor-content .honor {
  padding: 80px 60px;
  width: 33%;
  text-align: center;
}

.honor-container .honor-content .honor span {
  color: #fff;
  font-size: 50px;
}

.honor-container .honor-content .honor h3 {
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  color: #4B67B1;
  color: #fff;
  padding: 25px 0;
}

.honor-container .honor-content .honor p {
  line-height: 22px;
  color: #fff;
}

.honor-container .honor-content .honor.courses {
  background: #4B67B1;
  position: relative;
}

.honor-container .honor-content .honor.courses::before {
  background-color: #4B67B1;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
}

.honor-container .honor-content .honor.students {
  background: #383FA8;
}

.honor-container .honor-content .honor.experience {
  background: #2B4177;
  position: relative;
}

.honor-container .honor-content .honor.experience::after {
  background-color: #2B4177;
  position: absolute;
  content: '';
  right: 0;
  top: 0;
}


/*Добавить*/

.honor-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-image: linear-gradient(90deg, red 50%, green 50%);
}

<div class="honor-container">
  <div class="wrapper">
    <div class="honor-content">
      <div class="honor courses">
        <span class="fas fa-book-open"></span>
        <h3>14 курсов</h3>
        <p>Diam sit imperdiet ullamcorper pellentesque mattis elit. Sagittis, orci integer nibh ut amet. </p>
      </div>
      <div class="honor students">
        <span class="fas fa-user-friends"></span>
        <h3>560 студентов</h3>
        <p>Condimentum nibh nisl molestie est. Odio vel enim imperdiet ut libero feugiat sit tempus. Augue nunc.</p>
      </div>
      <div class="honor experience">
        <span class="fas fa-graduation-cap"></span>
        <h3>10 лет опыта</h3>
        <p>Condimentum nibh nisl molestie est. Odio vel enim imperdiet ut libero feugiat sit tempus.</p>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Задать background-color с помощью псевдоэлементов before, after

Ответы (1 шт):