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