Before and After Pseudo Elements

Question

JS Fiddle

I have a div:

<div id="strip"></div>

With the 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. 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.

Answer 1

The CSS specification says :

The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

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.

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