Have a different color before and after a div with CSS
14
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.
html css
edited Feb 20 at 19:05
Tommy Hansen
155
asked Feb 20 at 10:48
C. MolendijkC. Molendijk
688917
add a comment |
14
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.
html css
edited Feb 20 at 19:05
Tommy Hansen
155
asked Feb 20 at 10:48
C. MolendijkC. Molendijk
688917
2
you need to specify some width/height for the pseudo element and make them at least inline-block
– Temani Afif
Feb 20 at 10:51
1
You havent given it any height or width so it can't display anything. I think a better solution would be to fix it with flexbox (having 3 containers instead of pseudo elements).
– idontknow
Feb 20 at 10:52
add a comment |
14
14
14
2
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.
html css
edited Feb 20 at 19:05
Tommy Hansen
155
asked Feb 20 at 10:48
C. MolendijkC. Molendijk
688917
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.
.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>.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>html css
html css
edited Feb 20 at 19:05
Tommy Hansen
155
asked Feb 20 at 10:48
C. MolendijkC. Molendijk
688917
edited Feb 20 at 19:05
Tommy Hansen
155
asked Feb 20 at 10:48
C. MolendijkC. Molendijk
688917
edited Feb 20 at 19:05
Tommy Hansen
155
edited Feb 20 at 19:05
Tommy Hansen
155
edited Feb 20 at 19:05
Tommy Hansen
155
155
asked Feb 20 at 10:48
C. MolendijkC. Molendijk
688917
asked Feb 20 at 10:48
C. MolendijkC. Molendijk
688917
asked Feb 20 at 10:48
C. MolendijkC. Molendijk
688917
688917
2
you need to specify some width/height for the pseudo element and make them at least inline-block
– Temani Afif
Feb 20 at 10:51
1
You havent given it any height or width so it can't display anything. I think a better solution would be to fix it with flexbox (having 3 containers instead of pseudo elements).
– idontknow
Feb 20 at 10:52
add a comment |
2
you need to specify some width/height for the pseudo element and make them at least inline-block
– Temani Afif
Feb 20 at 10:51
1
You havent given it any height or width so it can't display anything. I think a better solution would be to fix it with flexbox (having 3 containers instead of pseudo elements).
– idontknow
Feb 20 at 10:52
2
2
you need to specify some width/height for the pseudo element and make them at least inline-block
– Temani Afif
Feb 20 at 10:51
you need to specify some width/height for the pseudo element and make them at least inline-block
– Temani Afif
Feb 20 at 10:51
1
1
You havent given it any height or width so it can't display anything. I think a better solution would be to fix it with flexbox (having 3 containers instead of pseudo elements).
– idontknow
Feb 20 at 10:52
You havent given it any height or width so it can't display anything. I think a better solution would be to fix it with flexbox (having 3 containers instead of pseudo elements).
– idontknow
Feb 20 at 10:52
add a comment |
6 Answers
6
active
oldest
votes
7
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>edited Feb 20 at 11:37
Alessio Cantarella
2,21031323
answered Feb 20 at 11:00
Mohit GuptaMohit Gupta
573211
1
This solution worked for me. Even with the change to gradient background colors.
– C. Molendijk
Feb 21 at 10:28
add a comment |
21
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>answered Feb 20 at 10:53
Temani AfifTemani Afif
75.8k94487
Gradients have some serous drawbacks regarding scaling the middle section that using before and after avoids, but the simplicity advantage is really nice.
– The Nate
Feb 20 at 19:40
1
@TheNate there is no scaling drawbacks since it's a background ;) you can scale the middle one like you want since it has a white background and it will simply cover the gradient (first and second example) and the third example is an alternative to have transparency which was a plus.
– Temani Afif
Feb 20 at 19:55
@TheNate also note that the pseudo element is doing exactly the same as my first example since each one is taking half the height and the white background of the h1 is hidding the middle part .. I simply did the same with a gradient (half color in each side)
– Temani Afif
Feb 20 at 20:05
@TemaniAfif Herecenter/250pxshould be exactly same as h1'smax-width:250px;? And also what doescenter/250pxdo?
– VirenPanchal
Feb 20 at 20:31
1
@TemaniAfif Thank you very much for your explanation. Finally I got it how it worked. It's the easiest solution.
– VirenPanchal
Feb 20 at 20:45
|
show 1 more comment
0
.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>answered Feb 20 at 11:25
Falguni PrajapatiFalguni Prajapati
1215
add a comment |
0
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>answered Feb 20 at 13:46
FerrybigFerrybig
11.3k53653
add a comment |
0
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>answered Feb 20 at 17:54
Howdy_McGeeHowdy_McGee
4,2292090158
add a comment |
0
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>answered Feb 21 at 6:50
Salman ASalman A
182k66340434
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54784508%2fhave-a-different-color-before-and-after-a-div-with-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
7
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>edited Feb 20 at 11:37
Alessio Cantarella
2,21031323
answered Feb 20 at 11:00
Mohit GuptaMohit Gupta
573211
1
This solution worked for me. Even with the change to gradient background colors.
– C. Molendijk
Feb 21 at 10:28
add a comment |
7
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>edited Feb 20 at 11:37
Alessio Cantarella
2,21031323
answered Feb 20 at 11:00
Mohit GuptaMohit Gupta
573211
1
This solution worked for me. Even with the change to gradient background colors.
– C. Molendijk
Feb 21 at 10:28
add a comment |
7
7
7
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>edited Feb 20 at 11:37
Alessio Cantarella
2,21031323
answered Feb 20 at 11:00
Mohit GuptaMohit Gupta
573211
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>.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>.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>edited Feb 20 at 11:37
Alessio Cantarella
2,21031323
answered Feb 20 at 11:00
Mohit GuptaMohit Gupta
573211
edited Feb 20 at 11:37
Alessio Cantarella
2,21031323
edited Feb 20 at 11:37
Alessio Cantarella
2,21031323
edited Feb 20 at 11:37
Alessio Cantarella
2,21031323
2,21031323
answered Feb 20 at 11:00
Mohit GuptaMohit Gupta
573211
answered Feb 20 at 11:00
Mohit GuptaMohit Gupta
573211
answered Feb 20 at 11:00
Mohit GuptaMohit Gupta
573211
573211
1
This solution worked for me. Even with the change to gradient background colors.
– C. Molendijk
Feb 21 at 10:28
add a comment |
1
This solution worked for me. Even with the change to gradient background colors.
– C. Molendijk
Feb 21 at 10:28
1
1
This solution worked for me. Even with the change to gradient background colors.
– C. Molendijk
Feb 21 at 10:28
This solution worked for me. Even with the change to gradient background colors.
– C. Molendijk
Feb 21 at 10:28
add a comment |
21
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>answered Feb 20 at 10:53
Temani AfifTemani Afif
75.8k94487
Gradients have some serous drawbacks regarding scaling the middle section that using before and after avoids, but the simplicity advantage is really nice.
– The Nate
Feb 20 at 19:40
1
@TheNate there is no scaling drawbacks since it's a background ;) you can scale the middle one like you want since it has a white background and it will simply cover the gradient (first and second example) and the third example is an alternative to have transparency which was a plus.
– Temani Afif
Feb 20 at 19:55
@TheNate also note that the pseudo element is doing exactly the same as my first example since each one is taking half the height and the white background of the h1 is hidding the middle part .. I simply did the same with a gradient (half color in each side)
– Temani Afif
Feb 20 at 20:05
@TemaniAfif Herecenter/250pxshould be exactly same as h1'smax-width:250px;? And also what doescenter/250pxdo?
– VirenPanchal
Feb 20 at 20:31
1
@TemaniAfif Thank you very much for your explanation. Finally I got it how it worked. It's the easiest solution.
– VirenPanchal
Feb 20 at 20:45
|
show 1 more comment
21
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>answered Feb 20 at 10:53
Temani AfifTemani Afif
75.8k94487
Gradients have some serous drawbacks regarding scaling the middle section that using before and after avoids, but the simplicity advantage is really nice.
– The Nate
Feb 20 at 19:40
1
@TheNate there is no scaling drawbacks since it's a background ;) you can scale the middle one like you want since it has a white background and it will simply cover the gradient (first and second example) and the third example is an alternative to have transparency which was a plus.
– Temani Afif
Feb 20 at 19:55
@TheNate also note that the pseudo element is doing exactly the same as my first example since each one is taking half the height and the white background of the h1 is hidding the middle part .. I simply did the same with a gradient (half color in each side)
– Temani Afif
Feb 20 at 20:05
@TemaniAfif Herecenter/250pxshould be exactly same as h1'smax-width:250px;? And also what doescenter/250pxdo?
– VirenPanchal
Feb 20 at 20:31
1
@TemaniAfif Thank you very much for your explanation. Finally I got it how it worked. It's the easiest solution.
– VirenPanchal
Feb 20 at 20:45
|
show 1 more comment
21
21
21
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>answered Feb 20 at 10:53
Temani AfifTemani Afif
75.8k94487
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>.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>.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>.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>.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>.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>.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>.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>.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>answered Feb 20 at 10:53
Temani AfifTemani Afif
75.8k94487
edited Feb 20 at 20:59
answered Feb 20 at 10:53
Temani AfifTemani Afif
75.8k94487
answered Feb 20 at 10:53
Temani AfifTemani Afif
75.8k94487
answered Feb 20 at 10:53
Temani AfifTemani Afif
75.8k94487
75.8k94487
Gradients have some serous drawbacks regarding scaling the middle section that using before and after avoids, but the simplicity advantage is really nice.
– The Nate
Feb 20 at 19:40
1
@TheNate there is no scaling drawbacks since it's a background ;) you can scale the middle one like you want since it has a white background and it will simply cover the gradient (first and second example) and the third example is an alternative to have transparency which was a plus.
– Temani Afif
Feb 20 at 19:55
@TheNate also note that the pseudo element is doing exactly the same as my first example since each one is taking half the height and the white background of the h1 is hidding the middle part .. I simply did the same with a gradient (half color in each side)
– Temani Afif
Feb 20 at 20:05
@TemaniAfif Herecenter/250pxshould be exactly same as h1'smax-width:250px;? And also what doescenter/250pxdo?
– VirenPanchal
Feb 20 at 20:31
1
@TemaniAfif Thank you very much for your explanation. Finally I got it how it worked. It's the easiest solution.
– VirenPanchal
Feb 20 at 20:45
|
show 1 more comment
Gradients have some serous drawbacks regarding scaling the middle section that using before and after avoids, but the simplicity advantage is really nice.
– The Nate
Feb 20 at 19:40
1
@TheNate there is no scaling drawbacks since it's a background ;) you can scale the middle one like you want since it has a white background and it will simply cover the gradient (first and second example) and the third example is an alternative to have transparency which was a plus.
– Temani Afif
Feb 20 at 19:55
@TheNate also note that the pseudo element is doing exactly the same as my first example since each one is taking half the height and the white background of the h1 is hidding the middle part .. I simply did the same with a gradient (half color in each side)
– Temani Afif
Feb 20 at 20:05
@TemaniAfif Herecenter/250pxshould be exactly same as h1'smax-width:250px;? And also what doescenter/250pxdo?
– VirenPanchal
Feb 20 at 20:31
1
@TemaniAfif Thank you very much for your explanation. Finally I got it how it worked. It's the easiest solution.
– VirenPanchal
Feb 20 at 20:45
Gradients have some serous drawbacks regarding scaling the middle section that using before and after avoids, but the simplicity advantage is really nice.
– The Nate
Feb 20 at 19:40
Gradients have some serous drawbacks regarding scaling the middle section that using before and after avoids, but the simplicity advantage is really nice.
– The Nate
Feb 20 at 19:40
1
1
@TheNate there is no scaling drawbacks since it's a background ;) you can scale the middle one like you want since it has a white background and it will simply cover the gradient (first and second example) and the third example is an alternative to have transparency which was a plus.
– Temani Afif
Feb 20 at 19:55
@TheNate there is no scaling drawbacks since it's a background ;) you can scale the middle one like you want since it has a white background and it will simply cover the gradient (first and second example) and the third example is an alternative to have transparency which was a plus.
– Temani Afif
Feb 20 at 19:55
@TheNate also note that the pseudo element is doing exactly the same as my first example since each one is taking half the height and the white background of the h1 is hidding the middle part .. I simply did the same with a gradient (half color in each side)
– Temani Afif
Feb 20 at 20:05
@TheNate also note that the pseudo element is doing exactly the same as my first example since each one is taking half the height and the white background of the h1 is hidding the middle part .. I simply did the same with a gradient (half color in each side)
– Temani Afif
Feb 20 at 20:05
@TemaniAfif Here
center/250px should be exactly same as h1's max-width:250px; ? And also what does center/250px do?– VirenPanchal
Feb 20 at 20:31
@TemaniAfif Here
center/250px should be exactly same as h1's max-width:250px; ? And also what does center/250px do?– VirenPanchal
Feb 20 at 20:31
1
1
@TemaniAfif Thank you very much for your explanation. Finally I got it how it worked. It's the easiest solution.
– VirenPanchal
Feb 20 at 20:45
@TemaniAfif Thank you very much for your explanation. Finally I got it how it worked. It's the easiest solution.
– VirenPanchal
Feb 20 at 20:45
|
show 1 more comment
0
.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>answered Feb 20 at 11:25
Falguni PrajapatiFalguni Prajapati
1215
add a comment |
0
.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>answered Feb 20 at 11:25
Falguni PrajapatiFalguni Prajapati
1215
add a comment |
0
0
0
.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>answered Feb 20 at 11:25
Falguni PrajapatiFalguni Prajapati
1215
.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>.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>.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>answered Feb 20 at 11:25
Falguni PrajapatiFalguni Prajapati
1215
answered Feb 20 at 11:25
Falguni PrajapatiFalguni Prajapati
1215
answered Feb 20 at 11:25
Falguni PrajapatiFalguni Prajapati
1215
answered Feb 20 at 11:25
Falguni PrajapatiFalguni Prajapati
1215
1215
add a comment |
add a comment |
0
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>answered Feb 20 at 13:46
FerrybigFerrybig
11.3k53653
add a comment |
0
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>answered Feb 20 at 13:46
FerrybigFerrybig
11.3k53653
add a comment |
0
0
0
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>answered Feb 20 at 13:46
FerrybigFerrybig
11.3k53653
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>.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>.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>answered Feb 20 at 13:46
FerrybigFerrybig
11.3k53653
answered Feb 20 at 13:46
FerrybigFerrybig
11.3k53653
answered Feb 20 at 13:46
FerrybigFerrybig
11.3k53653
answered Feb 20 at 13:46
FerrybigFerrybig
11.3k53653
11.3k53653
add a comment |
add a comment |
0
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>answered Feb 20 at 17:54
Howdy_McGeeHowdy_McGee
4,2292090158
add a comment |
0
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>answered Feb 20 at 17:54
Howdy_McGeeHowdy_McGee
4,2292090158
add a comment |
0
0
0
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>answered Feb 20 at 17:54
Howdy_McGeeHowdy_McGee
4,2292090158
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>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>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>answered Feb 20 at 17:54
Howdy_McGeeHowdy_McGee
4,2292090158
answered Feb 20 at 17:54
Howdy_McGeeHowdy_McGee
4,2292090158
answered Feb 20 at 17:54
Howdy_McGeeHowdy_McGee
4,2292090158
answered Feb 20 at 17:54
Howdy_McGeeHowdy_McGee
4,2292090158
4,2292090158
add a comment |
add a comment |
0
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>answered Feb 21 at 6:50
Salman ASalman A
182k66340434
add a comment |
0
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>answered Feb 21 at 6:50
Salman ASalman A
182k66340434
add a comment |
0
0
0
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>answered Feb 21 at 6:50
Salman ASalman A
182k66340434
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>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>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>answered Feb 21 at 6:50
Salman ASalman A
182k66340434
answered Feb 21 at 6:50
Salman ASalman A
182k66340434
answered Feb 21 at 6:50
Salman ASalman A
182k66340434
answered Feb 21 at 6:50
Salman ASalman A
182k66340434
182k66340434
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54784508%2fhave-a-different-color-before-and-after-a-div-with-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
you need to specify some width/height for the pseudo element and make them at least inline-block
– Temani Afif
Feb 20 at 10:51
1
You havent given it any height or width so it can't display anything. I think a better solution would be to fix it with flexbox (having 3 containers instead of pseudo elements).
– idontknow
Feb 20 at 10:52