对于一个网站,我正在尝试让容器之前的元素以不同颜色出现,而让容器之后的元素以另一种颜色出现。我想得到以下结果:
我尝试了这个:CSS :before :after background color。还有很多其他的东西,但都没有成功。最后我得到了以下代码:
.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>