::之后出现伪元素

Question

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> 

Answer 1

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> 

Answer 2

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>