CODEWITHSUNDEEP
htmlcss
C. Molendijk
C. Molendijk

Reputation: 2834

Have a different color before and after a div with CSS

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:

Example of the 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.

Upvotes: 19

Views: 5599

Answers (6)

Salman Arshad
Salman Arshad

Reputation: 272236

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>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273512

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>

Upvotes: 25

Howdy_McGee
Howdy_McGee

Reputation: 10663

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>

Upvotes: 1

Ferrybig
Ferrybig

Reputation: 18834

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>

Upvotes: 0

Mohit Gupta
Mohit Gupta

Reputation: 739

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>

Upvotes: 9

Falguni Prajapati
Falguni Prajapati

Reputation: 129

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

Upvotes: 1

Related Questions