[英]Before and After Pseudo Elements
I have a div: 我有一个div:
<div id="strip"></div>
With the CSS: 使用CSS:
width: 100%;
height: 130px;
background: grey;
I want a pseudo element after it and to be at the base of the strip. 我想要一个伪元素,放在它的底部。
#strip:after {
content: "";
display: block;
width: 100%;
height: 10px;
background: blue;
}
I also have a pseudo element before the strip. 剥离之前,我还有一个伪元素。
#strip:before {
content: "";
display: block;
width: 100%;
height: 10px;
background: yellow;
}
The problem is, the after pseudo element does not sit at the bottom of the strip div. 问题是,after伪元素没有位于strip div的底部。 Where am I going wrong. 我要去哪里错了。 Please note I have simplified the question, I know there are alternative ways to get strips of color at the top and bottom of a div. 请注意,我已经简化了这个问题,我知道有其他方法可以在div的顶部和底部获得彩色条。
The CSS specification says : CSS规范说 :
The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element. :before和:after伪元素与其他框交互,就好像它们是插入其关联元素内的真实元素一样。
In order to solve your issue, you can use the solution suggested by Nico O. The after pseudo-element is absolute positionned at the bottom of the main element. 为了解决您的问题,您可以使用Nico O建议的解决方案。after伪元素绝对定位在主要元素的底部。
#strip{
width: 100%;
height: 130px;
background: grey;
position: relative;
padding-bottom: 10px;
}
#strip:after {
content: "";
display: block;
width: 100%;
height: 10px;
background: blue;
position: absolute;
bottom:0;
}
#strip:before {
content: "";
display: block;
width: 100%;
height: 10px;
background: yellow;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.