css background image positioning (negative position?)

Question

I\'m trying to add an icon which sits on top of the border, splitting it in half.

Here is what I have so far:

Answer 1

Another way is using the pseudo class :after to inject an element after your box.

CSS

  .box{
    position:relative;
  }
  .box:after{
       content:url(icon_neutral.png);
       display:block;
       position:relative;
       top: -30px;
  }

HTML

    

        
This is a test!