::after pseudo element appearing before

user_8648353 0
Viewed 549

I'm trying to create a subtle wave on the top and bottom of a gradient. However, the ::after pseudo element is appearing before the main content and not after. Currently it's showing as ::before, ::after, main content, but I want it to show as ::before, main content, ::after.

Here's my code:

#gradient {
  background: #0068a9;/* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Safari 5.1-6*/
  background: -o-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Opera 11.1-12*/
  background: -moz-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Fx 3.6-15*/
  background: linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Standard*/
  width: 100%;
  height: 300px;
  min-height: 0px;
  display: block;
}

#gradient::before,
#gradient::after {
  display: block;
  content: "";
  width: 100%;
  height: 75px;
}

#gradient::before {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_topcurve.png") center top;
}

#gradient::after {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_bottomcurve.png") center top;
}
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
<div id="gradient"></div>
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>

pseudo-element css html
2 Answers

It is appearing after normally. The problem is your div height. I added backgrounds to show where they are. Red is before and green is after

#gradient {
  background: #0068a9;/* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Safari 5.1-6*/
  background: -o-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Opera 11.1-12*/
  background: -moz-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Fx 3.6-15*/
  background: linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Standard*/
  width: 100%;
  height: 150px;
  min-height: 0px;
  display: block;
}

#gradient::before,
#gradient::after {
  display: block;
  content: "";
  width: 100%;
  height: 75px;
}

#gradient::before {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_topcurve.png") center top;
background-color: red;
}

#gradient::after {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_bottomcurve.png") center top;
background-color: green;
}
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
<div id="gradient"></div>
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>

user_59604190

Make your gradient div relative , :before and :after absolute and top:0 in :before and bottom:0 in :after

#gradient {
  background: #0068a9;/* For browsers that do not support gradients */
  background: -webkit-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Safari 5.1-6*/
  background: -o-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Opera 11.1-12*/
  background: -moz-linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Fx 3.6-15*/
  background: linear-gradient(rgba(0, 104, 169, 1), rgba(0, 104, 169, .9));/*Standard*/
  width: 100%;
  height: 300px;
  min-height: 0px;
  display: block;
  position: relative;
}

#gradient::before,
#gradient::after {
  display: block;
  content: "";
  width: 100%;
  height: 75px;
  position: absolute;
}

#gradient::before {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_topcurve.png") center top;
  top:0;
}

#gradient::after {
  background: #f2f2f2 url("http://www.qumidesignco.com/clients/preparedcapital/pc_bottomcurve.png") center top;
  bottom: 0;
}
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>
<div id="gradient"></div>
<div style="background:#f2f2f2; width: 100%; height: 300px; min-height: 0px; display:block;"></div>

user_82478500
Related