::after 伪元素出现在之前答案

【问题标题】：::after pseudo element appearing before::after 伪元素出现在之前
【发布时间】：2017-09-21 11:45:44
【问题描述】：

我正在尝试在渐变的顶部和底部创建一个微妙的波浪。但是， ::after 伪元素出现在主要内容之前而不是之后。目前它显示为::before、::after、主要内容，但我希望它显示为::before、主要内容、::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;
}

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

【问题讨论】：

#gradient 没有后面的伪元素的内容。您是否知道:before 和:after 伪元素位于元素内部？
你所说的“主要内容”是什么？
是的，我知道伪元素在元素内部。我认为我在#gradient 上 300 像素的高度就足够了。是否有解决方法可以让 after 元素在 #gradient 高度之后显示？
主要内容是div #gradient。让 after 伪元素出现在 #gradient 高度之后。

标签： html css pseudo-element

【解决方案1】：

在 :before 和 :after 中创建 gradient div relative 、 :before and :after absolute 和 top:0 和 bottom:0

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

【讨论】：

做到了！谢谢！！

【解决方案2】：

它是正常出现的。问题是你的 div 高度。我添加了背景以显示它们的位置。前面是红色，后面是绿色

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

【讨论】：