Have a different color before and after a div with CSS
Question
For a website I'm trying to get the element before a container to appear in a different color than the element after a container. I want to get the following result:
I've tried this one: CSS :before :after background color . Also a lot of other stuff but it all didn't work out. 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.
6 answers
solution1
23 2019-02-20 10:53:15
Here is an easier idea with background coloration:
.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>
You can still optimize more with only one container and multiple background:
.container { background: linear-gradient(#fff,#fff) center/250px 100% no-repeat, linear-gradient(to right, red 50%, blue 0); text-align: center; padding:10px 0; } .container h1 { margin:0 auto; max-width:250px; }
<div class="container"> <h1>Hello world.</h1> </div>
Another way with transparency:
.container { background: linear-gradient(red,red) left, linear-gradient(blue,blue) right; background-size:calc(50% - (250px/2)) 100%; background-repeat:no-repeat; text-align: center; padding:10px 0; } .container h1 { margin:0 auto; max-width:250px; } body { background:pink; }
<div class="container"> <h1>Hello world.</h1> </div>
Another syntax for the transparent one:
.container { background: linear-gradient(to right, red calc(50% - (250px/2) - 1px),transparent calc(50% - (250px/2)), transparent calc(50% + (250px/2)),blue calc(50% + (250px/2) + 1px)); text-align: center; padding:10px 0; } .container h1 { margin:0 auto; max-width:250px; } body { background:pink; }
<div class="container"> <h1>Hello world.</h1> </div>
solution2
9 ACCPTED 2019-02-20 11:00:22
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>
solution3
1 2019-02-20 11:25:02
.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>
solution4
1 2019-02-20 17:54:04
If you don't want to limit the text to be 250 you could provide an inner <span /> tag, controlling the white-space with padding and ( on smaller screens ) the blue and red colors with margin. I believe this is probably more of a diverse solution than previously provided ones.
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>
solution5
1 2019-02-21 06:50:59
If the width of the heading is fixed (250px in your example) then you can get rid of the wrapper div and use padding + linear gradient:
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>
solution6
0 2019-02-20 13:46:55
You could use flex to accomplish this.
By making the container a flex element, and then giving the before and after elements a flex of 1, it automatically centers the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.