I seem to be having some trouble understanding the ::before and ::after features in CSS.
My goal is to create a 200x200px box with another smaller box (24x24) positioned at the top right. Here's what I have so far:
https://jsfiddle.net/xd6L3h6v/
<div id="foo">bla test</div>
#foo {
position: relative;
width: 200px;
height: 200px;
background: green;
}
#foo::before {
position: absolute; top: 0; left: 0;
background: red;
width: 24px;
height: 24px;
}
Unfortunately, this doesn't seem to be working as expected. When I view it in Firefox, the ::before part does not show up in Firebug's DOM inspector.
Can someone help me figure out where I'm going wrong?
Thank you!