:: after the appearance of the pseudo-element

Question

I am trying to create a subtle wave above and below the gradient. However, :: after the pseudo-element appears before the main content, and not after. Currently it is displayed as :: before, :: after, the main content, but I want it to be displayed as: before, main content, :: after.

Here is 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> 

Answer 1

Make the gradient div relative :before and :after absolute and top:0 to :before and bottom:0 to :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> 

Answer 2

Appears after the usual. The problem is your div height. I added backgrounds to show where they are. Red before and green 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>