Looking for some CSS help:
<div id="strip"></div>
This is my setup:
width: 100%;
height: 130px;
background: grey;
I'm trying to add a pseudo-element after the strip, positioned at the bottom.
#strip:after {
content: "";
display: block;
width: 100%;
height: 10px;
background: blue;
}
There's also a pseudo-element before the strip.
#strip:before {
content: "";
display: block;
width: 100%;
height: 10px;
background: yellow;
}
The issue I'm facing is that the 'after' pseudo-element doesn't align with the bottom of the strip div. Can you point out where I might be making a mistake? Just looking for a solution to this specific problem. I understand there are other ways to achieve colored strips at the top and bottom of a div.