2

I may be misunderstanding the ::before and ::after features in CSS.

What I am trying to achieve, is a box of 200x200px, and then at the top right it would have another box (24x24). Here is what I've got:

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

However, this does not work. When I check it in Firefox, I don't see the ::before part in Firebug's DOM inspector.

Where am I going wrong?

Thanks!

Andrew Newby
  • 4,941
  • 6
  • 40
  • 81

1 Answers1

1

You just need to add content: '';

#foo {
  position: relative;
  width: 200px;
  height: 200px;
  background: green;
}
#foo::before {
  position: absolute; top: 0; left: 0;
  background: red;
  width: 24px;
  height: 24px;
  content: '';
}
<div id="foo">bla test</div>
nicael
  • 18,550
  • 13
  • 57
  • 90
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • ARGH... now I feel stupid! Can't believe I missed that bit out. Its been one of those days :/ It won't let me accept this answer yet, but I will do as soon as it lets me. – Andrew Newby Dec 21 '15 at 17:13
  • 1
    no need to delete the question - it could help someone else who comes across the same issue in the future :) – Andrew Newby Dec 21 '15 at 17:18