Have a different color before and after a div with CSS

  • A+
Category:Languages

For a website I'm trying to get the color before the container in a different color thAn after the container. I want to get the following result:

Have a different color before and after a div with CSS

I've tried this one: CSS :before :after background color. Also a lot of other stuff but it all didn't workout. I ended up with the following code:

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

The result is just white.

 


I have updated this using :before and :after, use this below code:

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

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: