Иметь другой цвет до и после div с CSS

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

Я пробовал это: CSS: before: after color background. Также много других вещей, но все это не сработало. Я получил следующий код:

.section {
  width: 100%;
}

.section .container {
  background-color: #fff;
  width: 250px;
  margin: 0 auto;
  text-align: center;
}

.section .container::before {
  background-color: red;
  content: ' ';
}

.section .container::after {
  background-color: blue;
  content: ' ';
}

.section .container h1 {
  padding: 10px;
}

<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

Ответы

Ответ 1

Я обновил это, используя :before и :after, используйте следующий код:

.section {
  width: 100%;
  position: relative;
}

.section .container {
  background-color:#fff;
  width: 250px;
  margin: 0 auto;
  text-align:center;
}
.section .container::before {
    background-color: red;
    content: ' ';
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: -1;
}
.section .container::after {
  background-color: blue;
  content: ' ';
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    z-index: -1;
    top: 0;
}

.section .container h1 {
  padding: 10px;
}

<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

Ответ 2

Вот более простая идея с фоновой окраской:

.section {
  background:linear-gradient(to right,red 50%,blue 0);
}

.section .container {
  background-color: #fff;
  width: 250px;
  margin: 0 auto;
  text-align: center;
}

.section .container h1 {
  padding: 10px;
}

<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>

Ответ 3

.section {
  width: 100%;
  position:relative;
}

.section .container {
  background-color:#fff;
  width: 250px;
  margin: 0 auto;
  text-align:center;
}
.section:after,.section:before{position:absolute; height:100%; width:50%; top:0;} 
.section:before {
  background-color: red;
  content: ' ';
  left:0;
}
.container{ background:#fff; position:relative; z-index:111;}
.section:after {
  background-color: blue;
  content: ' ';
  right:0
}

.section .container h1 {
  padding: 10px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="section">
      <div class="container">
        <h1>Hello world.</h1>
      </div>
    </div>
  </body>

</html>

Ответ 4

Если вы не хотите ограничивать текст 250, вы можете предоставить внутренний <span/>, управляющий пробелами с отступами и (на небольших экранах) синим и красным цветами с полем. Я считаю, что это, вероятно, более разнообразное решение, чем предоставленные ранее.

h1 {
  position: relative;
  text-align: center;
  color: #000;
  background-color: #00F;
}

h1 > span {
  position: relative;
  display: inline-block;
  padding: 20px; /* How much white-space on the sides */
  margin: 0 20px; /* How much blue and red we want to show on smaller screens when the text tightens up */
  background-color: #fff;
}

h1:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #F00;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="section">
      <div class="container">
        <h1><span>Hello world.</span></h1>
      </div>
    </div>
  </body>

</html>

Ответ 5

Если ширина заголовка фиксирована (в вашем примере 250px), то вы можете избавиться от div-оболочки и использовать padding + linear Градиент:

h1 {
  padding: 10px calc(50% - 250px / 2);
  width: 250px;
  text-align: center;
  background-image: linear-gradient(to right
    , red calc(50% - 250px / 2)
    , white calc(50% - 250px / 2)
    , white calc(50% + 250px / 2)
    , blue calc(50% + 250px / 2)
  );
}

<div class="section">
  <div class="container">
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Donec lacinia ante id nisi ultricies dictum.</p>
    <h1>Hello again</h1>
    <p>Proin rutrum mollis lorem ac hendrerit.</p>
    <p>Nunc laoreet odio non rhoncus sodales.</p>
  </div>
</div>

Ответ 6

Вы можете использовать flex для достижения этой цели.

Делая контейнер изгибаемым элементом, а затем присваивая элементам до и после изгиб 1, он автоматически центрирует h1

.section {
}

.section .container {
    display: flex;
}
.section .container::before {
    content: ' ';
    background-color: red;
    flex: 1;
}
.section .container::after {
    content: ' ';
    background-color: blue;
    flex: 1;
}

.section .container h1 {
  background-color:#fff;
  padding: 10px;
  width: 250px;
  text-align: center;
}

<div class="section">
  <div class="container">
    <h1>Hello world.</h1>
  </div>
</div>